<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  
  <title>React初探 | Jimmey-Jiang&#39;s Blog</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="description" content="概况React 起源于 Facebook 的内部F8项目，用来架设 Instagram 的网站，并于 2013 年 5 月开源。React主要用于构建UI，很多人认为 React 是 MVC 中的 V（视图）。React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。E6语法。 React 特点 声明式设计 -React采用声明范式，可以轻松描述应用。 高效 -React通过对">
<meta name="keywords" content="React">
<meta property="og:type" content="article">
<meta property="og:title" content="React初探">
<meta property="og:url" content="http://Jimmey-Jiang.github.io/2017/02/14/FrontFrame/React/React/index.html">
<meta property="og:site_name" content="Jimmey-Jiang&#39;s Blog">
<meta property="og:description" content="概况React 起源于 Facebook 的内部F8项目，用来架设 Instagram 的网站，并于 2013 年 5 月开源。React主要用于构建UI，很多人认为 React 是 MVC 中的 V（视图）。React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。E6语法。 React 特点 声明式设计 -React采用声明范式，可以轻松描述应用。 高效 -React通过对">
<meta property="og:locale" content="zh-Hans">
<meta property="og:updated_time" content="2017-07-28T10:54:48.000Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="React初探">
<meta name="twitter:description" content="概况React 起源于 Facebook 的内部F8项目，用来架设 Instagram 的网站，并于 2013 年 5 月开源。React主要用于构建UI，很多人认为 React 是 MVC 中的 V（视图）。React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。E6语法。 React 特点 声明式设计 -React采用声明范式，可以轻松描述应用。 高效 -React通过对">
  
    <link rel="alternative" href="/atom.xml" title="Jimmey-Jiang&#39;s Blog" type="application/atom+xml">
  
  
    <link rel="icon" href="/img/favicon.png">
  
  
      <link rel="stylesheet" href="//cdn.bootcss.com/animate.css/3.5.0/animate.min.css">
  
  <link rel="stylesheet" href="/css/style.css">
  <link rel="stylesheet" href="/font-awesome/css/font-awesome.min.css">
  <link rel="apple-touch-icon" href="/apple-touch-icon.png">
  
  
      <link rel="stylesheet" href="/fancybox/jquery.fancybox.css">
  
  <!-- 加载特效 -->
    <script src="/js/pace.js"></script>
    <link href="/css/pace/pace-theme-flash.css" rel="stylesheet" />
  <script>
      var yiliaConfig = {
          rootUrl: '/',
          fancybox: true,
          animate: true,
          isHome: false,
          isPost: true,
          isArchive: false,
          isTag: false,
          isCategory: false,
          open_in_new: false
      }
  </script>
</head>
<body>
  <div id="container">
    <div class="left-col">
    <div class="overlay"></div>
<div class="intrude-less">
    <header id="header" class="inner">
        <a href="/" class="profilepic">
            
            <img lazy-src="/img/head.jpg" class="js-avatar">
            
        </a>

        <hgroup>
          <h1 class="header-author"><a href="/" title="Hi Mate">安与生</a></h1>
        </hgroup>

        
        <p class="header-subtitle">城已成，兵不封，鼓不停，志不移，行不息</p>
        
        
            <form>
                <input type="text" class="st-default-search-input search" id="search" placeholder=" Search...">
            </form>
        
        
            <div id="switch-btn" class="switch-btn">
                <div class="icon">
                    <div class="icon-ctn">
                        <div class="icon-wrap icon-house" data-idx="0">
                            <div class="birdhouse"></div>
                            <div class="birdhouse_holes"></div>
                        </div>
                        <div class="icon-wrap icon-ribbon hide" data-idx="1">
                            <div class="ribbon"></div>
                        </div>
                        
                        <div class="icon-wrap icon-link hide" data-idx="2">
                            <div class="loopback_l"></div>
                            <div class="loopback_r"></div>
                        </div>
                        
                        
                        <div class="icon-wrap icon-me hide" data-idx="3">
                            <div class="user"></div>
                            <div class="shoulder"></div>
                        </div>
                        
                    </div>
                    
                </div>
                <div class="tips-box hide">
                    <div class="tips-arrow"></div>
                    <ul class="tips-inner">
                        <li>菜单</li>
                        <li>标签</li>
                        
                        <li>友情链接</li>
                        
                        
                        <li>关于我</li>
                        
                    </ul>
                </div>
            </div>
        

        <div id="switch-area" class="switch-area">
            <div class="switch-wrap">
                <section class="switch-part switch-part1">
                    <nav class="header-menu">
                        <ul>
                        
                            <li><a href="/archives">所有文章</a></li>
                        
                            <li><a href="/works">作品展示</a></li>
                        
                           <li><a href="/about">留言打卡</a></li>
                        
                            <li><a  target="_blank" href="https://tuchong.com/1496450/">摄影集展示</a></li>
                        
                        </ul>
                    </nav>
                    <nav class="header-nav">
                        <ul class="social">
                            
                                <a class="fl mail" target="_blank" href="http://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=4trX0tXT19PV1aKTk8yBjY8" title="mail">mail</a>
                            
                                <a class="fl github" target="_blank" href="https://github.com/Jimmey-Jiang" title="github">github</a>
                            
                                <a class="fl zhihu" target="_blank" href="https://www.zhihu.com" title="zhihu">zhihu</a>
                            
                                <a class="fl weibo" target="_blank" href="http://weibo.com" title="weibo">weibo</a>
                            
                                <a class="fl google" target="_blank" href="http://i.youku.com" title="google">google</a>
                            
                                <a class="fl twitter" target="_blank" href="http://twitter.com" title="twitter">twitter</a>
                            
                                <a class="fl Instagram" target="_blank" href="https://www.instagram.com" title="Instagram">Instagram</a>
                            
                                <a class="fl linkedin" target="_blank" href="https://www.linkedin.com" title="linkedin">linkedin</a>
                            
                        </ul>
                    </nav>
                </section>
                
                
                <section class="switch-part switch-part2">
                    <div class="widget tagcloud" id="js-tagcloud">
                        <a href="/tags/Ajax/" style="font-size: 11.67px;">Ajax</a> <a href="/tags/CDN/" style="font-size: 10px;">CDN</a> <a href="/tags/CSS/" style="font-size: 18.33px;">CSS</a> <a href="/tags/CSS3/" style="font-size: 11.67px;">CSS3</a> <a href="/tags/Chrome/" style="font-size: 10px;">Chrome</a> <a href="/tags/Development/" style="font-size: 10px;">Development</a> <a href="/tags/Front-end-outline/" style="font-size: 10px;">Front end outline</a> <a href="/tags/FrontPlan/" style="font-size: 10px;">FrontPlan</a> <a href="/tags/Git/" style="font-size: 11.67px;">Git</a> <a href="/tags/Gulp/" style="font-size: 10px;">Gulp</a> <a href="/tags/HTML/" style="font-size: 13.33px;">HTML</a> <a href="/tags/Hack/" style="font-size: 10px;">Hack</a> <a href="/tags/Hexo/" style="font-size: 16.67px;">Hexo</a> <a href="/tags/Interview/" style="font-size: 10px;">Interview</a> <a href="/tags/JavaScript/" style="font-size: 13.33px;">JavaScript</a> <a href="/tags/Javascript/" style="font-size: 10px;">Javascript</a> <a href="/tags/Markdown/" style="font-size: 10px;">Markdown</a> <a href="/tags/Mobile/" style="font-size: 13.33px;">Mobile</a> <a href="/tags/NodeJs/" style="font-size: 10px;">NodeJs</a> <a href="/tags/OOCSS/" style="font-size: 10px;">OOCSS</a> <a href="/tags/React/" style="font-size: 10px;">React</a> <a href="/tags/ReactNative/" style="font-size: 20px;">ReactNative</a> <a href="/tags/Sass/" style="font-size: 10px;">Sass</a> <a href="/tags/Sublime/" style="font-size: 15px;">Sublime</a> <a href="/tags/Terminal/" style="font-size: 10px;">Terminal</a> <a href="/tags/Video/" style="font-size: 10px;">Video</a> <a href="/tags/Vue/" style="font-size: 15px;">Vue</a> <a href="/tags/WeChatSDK/" style="font-size: 10px;">WeChatSDK</a> <a href="/tags/rem/" style="font-size: 10px;">rem</a> <a href="/tags/window-7/" style="font-size: 10px;">window 7</a>
                    </div>
                </section>
                
                
                
                <section class="switch-part switch-part3">
                    <div id="js-friends">
                    
                      <a target="_blank" class="main-nav-link switch-friends-link" href="http://MOxFIVE.github.io/">MOxFIVE</a>
                    
                      <a target="_blank" class="main-nav-link switch-friends-link" href="http://www.vsay.cn/">DoubleV</a>
                    
                      <a target="_blank" class="main-nav-link switch-friends-link" href="http://www.ccwebsite.com/">兮兮</a>
                    
                      <a target="_blank" class="main-nav-link switch-friends-link" href="http://blog.dandyweng.com/">翁天信</a>
                    
                      <a target="_blank" class="main-nav-link switch-friends-link" href="http://www.plqblog.com/views/index.php">潘利强</a>
                    
                      <a target="_blank" class="main-nav-link switch-friends-link" href="http://www.hankin.cn/">hankin</a>
                    
                      <a target="_blank" class="main-nav-link switch-friends-link" href="http://blog.waydrow.com/">waydrow</a>
                    
                      <a target="_blank" class="main-nav-link switch-friends-link" href="https://www.tangbc.com">TANGBC</a>
                    
                      <a target="_blank" class="main-nav-link switch-friends-link" href="https://www.w3ctrain.com/">Helkyle</a>
                    
                    </div>
                </section>
                

                
                
                <section class="switch-part switch-part4">
                
                    <div id="js-aboutme">纯海迷、爱运动、爱交友、爱旅行、喜欢接触新鲜事物、迎接新的挑战，更爱游离于错综复杂的编码与逻辑中</div>
                </section>
                
            </div>
        </div>
    </header>                
</div>
    </div>
    <div class="mid-col">
      <nav id="mobile-nav">
      <div class="overlay">
          <div class="slider-trigger"></div>
          <h1 class="header-author js-mobile-header hide"><a href="/" title="Me">安与生</a></h1>
      </div>
    <div class="intrude-less">
        <header id="header" class="inner">
            <a href="/" class="profilepic">
                
                    <img lazy-src="/img/head.jpg" class="js-avatar">
                
            </a>
            <hgroup>
              <h1 class="header-author"><a href="/" title="Me">安与生</a></h1>
            </hgroup>
            
            <p class="header-subtitle">城已成，兵不封，鼓不停，志不移，行不息</p>
            
            <nav class="header-menu">
                <ul>
                
                    <li><a href="/archives">所有文章</a></li>
                
                    <li><a href="/works">作品展示</a></li>
                
                   <li><a href="/about">留言打卡</a></li>
                
                    <li><a  target="_blank" href="https://tuchong.com/1496450/">摄影集展示</a></li>
                
                <div class="clearfix"></div>
                </ul>
            </nav>
            <nav class="header-nav">
                <div class="social">
                    
                        <a class="mail" target="_blank" href="http://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=4trX0tXT19PV1aKTk8yBjY8" title="mail">mail</a>
                    
                        <a class="github" target="_blank" href="https://github.com/Jimmey-Jiang" title="github">github</a>
                    
                        <a class="zhihu" target="_blank" href="https://www.zhihu.com" title="zhihu">zhihu</a>
                    
                        <a class="weibo" target="_blank" href="http://weibo.com" title="weibo">weibo</a>
                    
                        <a class="google" target="_blank" href="http://i.youku.com" title="google">google</a>
                    
                        <a class="twitter" target="_blank" href="http://twitter.com" title="twitter">twitter</a>
                    
                        <a class="Instagram" target="_blank" href="https://www.instagram.com" title="Instagram">Instagram</a>
                    
                        <a class="linkedin" target="_blank" href="https://www.linkedin.com" title="linkedin">linkedin</a>
                    
                </div>
            </nav>
        </header>                
    </div>
</nav>
      <div class="body-wrap"><article id="post-FrontFrame/React/React" class="article article-type-post" itemscope itemprop="blogPost">
  
    <div class="article-meta">
      <a href="/2017/02/14/FrontFrame/React/React/" class="article-date">
      <time datetime="2017-02-14T10:29:00.000Z" itemprop="datePublished">2017-02-14</time>
</a>
    </div>
  
  <div class="article-inner">
    
      <input type="hidden" class="isFancy" />
    
    
      <header class="article-header">
        
  
    <h1 class="article-title" itemprop="name">
      React初探
    </h1>
  

      </header>
      
      <div class="article-info article-info-post">
        
    <div class="article-category tagcloud">
    <a class="article-category-link" href="/categories/React/">React</a>
    </div>

        
    <div class="article-tag tagcloud">
        <ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/React/">React</a></li></ul>
    </div>

        <div class="clearfix"></div>
      </div>
      
    
    <div class="article-entry" itemprop="articleBody">
      
          
        <h2 id="概况"><a href="#概况" class="headerlink" title="概况"></a>概况</h2><p>React 起源于 Facebook 的内部F8项目，用来架设 Instagram 的网站，并于 2013 年 5 月开源。<br>React主要用于构建UI，很多人认为 React 是 MVC 中的 V（视图）。<br>React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。E6语法。</p>
<h3 id="React-特点"><a href="#React-特点" class="headerlink" title="React 特点"></a>React 特点</h3><ol>
<li>声明式设计 -React采用声明范式，可以轻松描述应用。</li>
<li>高效 -React通过对DOM的模拟，最大限度地减少与DOM的交互。</li>
<li>灵活 -React可以与已知的库或框架很好地配合。</li>
<li>JSX - JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ，但我们建议使用它。</li>
<li>组件 - 通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。</li>
<li>单向响应的数据流 - React 实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单。</li>
</ol>
<ul>
<li><a href="http://facebook.github.io/react/" target="_blank" rel="external">官网地址</a><a id="more"></a>
</li>
</ul>
<h2 id="简单Demo"><a href="#简单Demo" class="headerlink" title="简单Demo"></a>简单Demo</h2><figure class="highlight xml"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div></pre></td><td class="code"><pre><div class="line"><span class="meta">&lt;!DOCTYPE html&gt;</span></div><div class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></div><div class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></div><div class="line">	<span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span> /&gt;</span></div><div class="line">	<span class="tag">&lt;<span class="name">title</span>&gt;</span>Hello React!<span class="tag">&lt;/<span class="name">title</span>&gt;</span></div><div class="line">	<span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"http://static.runoob.com/assets/react/react-0.14.7/build/react.min.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></div><div class="line">	<span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"http://static.runoob.com/assets/react/react-0.14.7/build/react-dom.min.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></div><div class="line">	<span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"http://static.runoob.com/assets/react/browser.min.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></div><div class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></div><div class="line">	<span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"example"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></div><div class="line">	<span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">"text/babel"</span>&gt;</span><span class="javascript"></span></div><div class="line">		ReactDOM.render(</div><div class="line">			<span class="xml"><span class="tag">&lt;<span class="name">h1</span>&gt;</span>Hello, world!<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span>,</div><div class="line">			<span class="built_in">document</span>.getElementById(<span class="string">'example'</span>)</div><div class="line">		);</div><div class="line">	<span class="tag">&lt;/<span class="name">script</span>&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></div></pre></td></tr></table></figure>
<h3 id="引入依赖"><a href="#引入依赖" class="headerlink" title="引入依赖"></a>引入依赖</h3><p>实例中我们引入了三个库： react.min.js 、react-dom.min.js 和 browser.min.js：<br>react.min.js - React 的核心库<br>react-dom.min.js - 提供与 DOM 相关的功能<br>browser.min.js - 用于将 JSX 语法转为 JavaScript 语法</p>
<h3 id="React代码"><a href="#React代码" class="headerlink" title="React代码"></a>React代码</h3><figure class="highlight xml"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">"text/babel"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></div></pre></td></tr></table></figure>
<h2 id="React-JSX语法"><a href="#React-JSX语法" class="headerlink" title="React JSX语法"></a>React JSX语法</h2><p>React 使用 JSX 来替代常规的 JavaScript。JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。我们不需要一定使用 JSX，但它有以下优点：</p>
<blockquote>
<p>JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化。<br>它是类型安全的，在编译过程中就能发现错误。<br>使用 JSX 编写模板更加简单快速。</p>
</blockquote>
<h3 id="简单嵌套元素"><a href="#简单嵌套元素" class="headerlink" title="简单嵌套元素"></a>简单嵌套元素</h3><p>JSX 看起来类似 HTML ，我们可以看下实例:<br>ReactDOM.render方法接受两个参数：<br>一个虚拟 DOM 节点和一个真实 DOM 节点，作用是将虚拟 DOM 挂载到真实 DOM。</p>
<h4 id="实例：Hello-world"><a href="#实例：Hello-world" class="headerlink" title="实例：Hello, world!"></a>实例：Hello, world!</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line">ReactDOM.render(content,element);</div><div class="line"></div><div class="line">ReactDOM.render(<span class="xml"><span class="tag">&lt;<span class="name">h1</span>&gt;</span>Hello, world!<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span>,<span class="built_in">document</span>.getElementById(<span class="string">'example'</span>));</div></pre></td></tr></table></figure>
<p><a href="demo/index1.html">index1</a></p>
<h3 id="复杂嵌套元素"><a href="#复杂嵌套元素" class="headerlink" title="复杂嵌套元素"></a>复杂嵌套元素</h3><p>我们可以在以上代码中嵌套多个 HTML 标签，需要使用一个 div 元素包裹它，实例中的 p 元素添加了自定义属性 data-myattribute，添加自定义属性需要使用 data- 前缀。</p>
<h4 id="实例：文字"><a href="#实例：文字" class="headerlink" title="实例：文字"></a>实例：文字</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div></pre></td><td class="code"><pre><div class="line">ReactDOM.render(</div><div class="line">    <span class="xml"><span class="tag">&lt;<span class="name">div</span>&gt;</span></span></div><div class="line">        <span class="tag">&lt;<span class="name">h1</span>&gt;</span>菜鸟教程<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></div><div class="line">        <span class="tag">&lt;<span class="name">h2</span>&gt;</span>欢迎学习 React<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></div><div class="line">        <span class="tag">&lt;<span class="name">p</span> <span class="attr">data-myattribute</span> = <span class="string">"somevalue"</span>&gt;</span>这是一个很不错的 JavaScript 库!<span class="tag">&lt;/<span class="name">p</span>&gt;</span></div><div class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span>,</div><div class="line">    mountNode</div><div class="line">);</div></pre></td></tr></table></figure>
<p><a href="demo/index2.html">index2</a></p>
<h3 id="JavaScript-表达式"><a href="#JavaScript-表达式" class="headerlink" title="JavaScript 表达式"></a>JavaScript 表达式</h3><p>我们可以在 JSX 中使用 JavaScript 表达式。表达式写在花括号 {} 中。实例如下：</p>
<h4 id="实例：计算"><a href="#实例：计算" class="headerlink" title="实例：计算"></a>实例：计算</h4><figure class="highlight dust"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line"><span class="xml">ReactDOM.render(</span></div><div class="line">    <span class="tag">&lt;<span class="name">div</span>&gt;</span><span class="tag">&lt;<span class="name">h1</span>&gt;</span><span class="template-variable">&#123;1+1&#125;</span><span class="xml"><span class="tag">&lt;/<span class="name">h1</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span>,mountNode</span></div><div class="line">);</div></pre></td></tr></table></figure>
<p><a href="demo/index3.html">index3</a></p>
<blockquote>
<p>判断语句</p>
</blockquote>
<p>在 JSX 中不能使用 if else 语句，但可以使用 conditional (三元运算) 表达式来替代。以下实例中如果变量 i 等于 1 浏览器将输出 true, 如果修改 i 的值，则会输出 false.</p>
<h4 id="实例：判断"><a href="#实例：判断" class="headerlink" title="实例：判断"></a>实例：判断</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">const</span> i = <span class="number">1</span>;</div><div class="line">ReactDOM.render(</div><div class="line">    <span class="xml"><span class="tag">&lt;<span class="name">div</span>&gt;</span></span></div><div class="line">        <span class="tag">&lt;<span class="name">h1</span>&gt;</span>&#123;i == 1 ? 'True!' : 'False'&#125;<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></div><div class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span>,</div><div class="line">    mountNode</div><div class="line">);</div></pre></td></tr></table></figure>
<p><a href="demo/index4.html">index4</a></p>
<h3 id="样式"><a href="#样式" class="headerlink" title="样式"></a>样式</h3><p>React 推荐使用内联样式。我们可以使用 camelCase 语法来设置内联样式. React 会在指定元素数字后自动添加 px 。以下实例演示了为 h1 元素添加 myStyle 内联样式：</p>
<h4 id="实例：CSS样式"><a href="#实例：CSS样式" class="headerlink" title="实例：CSS样式"></a>实例：CSS样式</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">const</span> myStyle = &#123;</div><div class="line">    <span class="attr">fontSize</span>: <span class="number">100</span>,</div><div class="line">    <span class="attr">lineHeight</span>: <span class="string">'30px'</span>,</div><div class="line">    <span class="attr">color</span>: <span class="string">'#FF0000'</span></div><div class="line">&#125;;</div><div class="line"></div><div class="line">ReactDOM.render(</div><div class="line">    <span class="xml"><span class="tag">&lt;<span class="name">h1</span> <span class="attr">style</span> = <span class="string">&#123;myStyle&#125;</span>&gt;</span>菜鸟教程<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span>,mountNode</div><div class="line">);</div><div class="line"></div><div class="line">ReactDOM.render(<span class="xml"><span class="tag">&lt;<span class="name">h1</span> <span class="attr">style</span> = <span class="string">&#123;&#123;fontSize:</span> <span class="attr">100</span>,<span class="attr">lineHeight:</span> '<span class="attr">30px</span>',<span class="attr">color:</span> '#<span class="attr">FF0000</span>'&#125;&#125;&gt;</span>菜鸟教程<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span>,mountNode);</div><div class="line"></div><div class="line">ReactDOM.render(<span class="xml"><span class="tag">&lt;<span class="name">h1</span> <span class="attr">className</span> = <span class="string">'class_name'</span>&gt;</span>菜鸟教程<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span>,mountNode);</div></pre></td></tr></table></figure>
<p><a href="demo/index5.html">index5</a></p>
<h3 id="注释"><a href="#注释" class="headerlink" title="注释"></a>注释</h3><p>注释需要写在花括号中，实例如下：</p>
<h3 id="实例：注释"><a href="#实例：注释" class="headerlink" title="实例：注释"></a>实例：注释</h3><figure class="highlight dust"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div></pre></td><td class="code"><pre><div class="line"><span class="xml">ReactDOM.render(</span></div><div class="line">    <span class="tag">&lt;<span class="name">div</span>&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">h1</span>&gt;</span>菜鸟教程<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></div><div class="line">    <span class="template-tag">&#123;/*注释<span class="name">...</span>*/&#125;</span><span class="xml"></span></div><div class="line">     <span class="tag">&lt;/<span class="name">div</span>&gt;</span>,mountNode</div><div class="line">);</div></pre></td></tr></table></figure>
<h2 id="React-Component组件"><a href="#React-Component组件" class="headerlink" title="React.Component组件"></a>React.Component组件</h2><h3 id="基础语法"><a href="#基础语法" class="headerlink" title="基础语法"></a>基础语法</h3><h3 id="HTML-标签-vs-React-组件"><a href="#HTML-标签-vs-React-组件" class="headerlink" title="HTML 标签 vs. React 组件"></a>HTML 标签 vs. React 组件</h3><p>React 可以渲染 HTML 标签 (strings) 或 React 组件 (classes)。要渲染 HTML 标签，只需在 JSX 里使用小写字母的标签名。<br>要渲染 React 组件，只需创建一个大写字母开头的本地变量。</p>
<h4 id="实例：创建组件"><a href="#实例：创建组件" class="headerlink" title="实例：创建组件"></a>实例：创建组件</h4><figure class="highlight scala"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div></pre></td><td class="code"><pre><div class="line"><span class="class"><span class="keyword">class</span> <span class="title">DivElement</span> <span class="keyword">extends</span> <span class="title">React</span>.<span class="title">Component</span></span>&#123;</div><div class="line">    render() &#123;</div><div class="line">        <span class="keyword">return</span> (</div><div class="line">            &lt;div className=<span class="string">"foo"</span>&gt;arr&lt;/div&gt;</div><div class="line">        );</div><div class="line">    &#125;</div><div class="line">&#125;</div><div class="line"><span class="type">ReactDOM</span>.render(&lt;<span class="type">DivElement</span> /&gt;, mountNode);</div></pre></td></tr></table></figure>
<h4 id="实例：组件嵌套"><a href="#实例：组件嵌套" class="headerlink" title="实例：组件嵌套"></a>实例：组件嵌套</h4><figure class="highlight scala"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div></pre></td><td class="code"><pre><div class="line"><span class="class"><span class="keyword">class</span> <span class="title">MyComponent</span> <span class="keyword">extends</span> <span class="title">React</span>.<span class="title">Component</span></span>&#123;</div><div class="line">    render() &#123;</div><div class="line">        <span class="keyword">return</span> &lt;div className=<span class="string">"MyComponent"</span>&gt;arr&lt;/div&gt;;</div><div class="line">    &#125;</div><div class="line">&#125;</div><div class="line"><span class="class"><span class="keyword">class</span> <span class="title">DivElement</span> <span class="keyword">extends</span> <span class="title">React</span>.<span class="title">Component</span></span>&#123;</div><div class="line">    render() &#123;</div><div class="line">        <span class="keyword">return</span> &lt;<span class="type">MyComponent</span> /&gt;;</div><div class="line">    &#125;</div><div class="line">&#125;</div><div class="line"><span class="type">ReactDOM</span>.render(&lt;<span class="type">DivElement</span> /&gt;, mountNode);</div></pre></td></tr></table></figure>
<p>React 的 JSX 使用大、小写的约定来区分本地组件的类和 HTML 标签。</p>
<blockquote>
<p>注意:<br>由于 JSX 就是 JavaScript，一些标识符像 class 和 for 不建议作为 XML 属性名。作为替代，React DOM 使用 className 和 htmlFor 来做对应的属性。</p>
</blockquote>
<h4 id="实例：组件语法"><a href="#实例：组件语法" class="headerlink" title="实例：组件语法"></a>实例：组件语法</h4><figure class="highlight scala"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div></pre></td><td class="code"><pre><div class="line"><span class="class"><span class="keyword">class</span> <span class="title">HelloMessage</span> <span class="keyword">extends</span> <span class="title">React</span>.<span class="title">Component</span></span>&#123;</div><div class="line">    render() &#123;</div><div class="line">        <span class="keyword">return</span> &lt;div className=<span class="string">"HelloMessage"</span>&gt;arr&lt;/div&gt;;</div><div class="line">    &#125;</div><div class="line">&#125;</div><div class="line"></div><div class="line"><span class="class"><span class="keyword">class</span> <span class="title">HelloMessage</span> <span class="keyword">extends</span> <span class="title">React</span>.<span class="title">Component</span></span>&#123;</div><div class="line">    render() &#123;</div><div class="line">        <span class="keyword">return</span> (</div><div class="line">            &lt;div className=<span class="string">"HelloMessage"</span>&gt;arr&lt;/div&gt;</div><div class="line">        );</div><div class="line">    &#125;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<p>React.Component方法用于生成一个组件类 HelloMessage。<hellomessage> 实例组件类并输出信息。</hellomessage></p>
<blockquote>
<p>注意：原生 HTML 元素名以小写字母开头，而自定义的 React 类名以大写字母开头，比如 HelloMessage 不能写成 helloMessage。除此之外还需要注意组件类只能包含一个顶层标签，否则也会报错。<br>如果我们需要向组件传递参数，可以使用 this.props 对象,实例如下：</p>
</blockquote>
<h4 id="实例：获取父元素的值"><a href="#实例：获取父元素的值" class="headerlink" title="实例：获取父元素的值"></a>实例：获取父元素的值</h4><figure class="highlight scala"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div></pre></td><td class="code"><pre><div class="line"><span class="class"><span class="keyword">class</span> <span class="title">DivElement</span> <span class="keyword">extends</span> <span class="title">React</span>.<span class="title">Component</span></span>&#123;</div><div class="line">    render() &#123;</div><div class="line">        <span class="keyword">return</span> (</div><div class="line">            &lt;div className=<span class="string">"foo"</span>&gt;&#123;<span class="keyword">this</span>.props.name&#125;&lt;/div&gt;</div><div class="line">        );</div><div class="line">    &#125;</div><div class="line">&#125;</div><div class="line"><span class="type">ReactDOM</span>.render(&lt;<span class="type">DivElement</span> name=<span class="string">"Runoob"</span> /&gt;, mountNode);</div></pre></td></tr></table></figure>
<p>以上实例中 name 属性通过 this.props.name 来获取（自身的数字）。<br>注意，在添加属性时， class 属性需要写成 className ，for 属性需要写成 htmlFor ，这是因为 class 和 for 是 JavaScript 的保留字。</p>
<h3 id="复合组件"><a href="#复合组件" class="headerlink" title="复合组件"></a>复合组件</h3><p>通过创建多个组件来合成一个组件，即把组件的不同功能点进行分离。<br>以下实例我们实现了输出网站名字和网址的组件：</p>
<h4 id="实例：链接"><a href="#实例：链接" class="headerlink" title="实例：链接"></a>实例：链接</h4><figure class="highlight scala"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div></pre></td><td class="code"><pre><div class="line"><span class="class"><span class="keyword">class</span> <span class="title">WebSite</span> <span class="keyword">extends</span> <span class="title">React</span>.<span class="title">Component</span></span>&#123;</div><div class="line">    render() &#123;</div><div class="line">        <span class="keyword">return</span> (</div><div class="line">            &lt;div className=&#123;<span class="keyword">this</span>.props.name&#125;&gt;&lt;<span class="type">Name</span> name=&#123;<span class="keyword">this</span>.props.name&#125; /&gt;&lt;<span class="type">Link</span> site=&#123;<span class="keyword">this</span>.props.site&#125; /&gt;&lt;/div&gt;</div><div class="line">        );</div><div class="line">    &#125;</div><div class="line">&#125;</div><div class="line"><span class="class"><span class="keyword">class</span> <span class="title">Name</span> <span class="keyword">extends</span> <span class="title">React</span>.<span class="title">Component</span></span>&#123;</div><div class="line">    render() &#123;</div><div class="line">        <span class="keyword">return</span> (</div><div class="line">            &lt;h1&gt;&#123;<span class="keyword">this</span>.props.name&#125;&lt;/h1&gt;</div><div class="line">        );</div><div class="line">    &#125;</div><div class="line">&#125;</div><div class="line"><span class="class"><span class="keyword">class</span> <span class="title">Link</span> <span class="keyword">extends</span> <span class="title">React</span>.<span class="title">Component</span></span>&#123;</div><div class="line">    render() &#123;</div><div class="line">        <span class="keyword">return</span> (</div><div class="line">            &lt;a href=&#123;<span class="keyword">this</span>.props.site&#125;&gt;&#123;<span class="keyword">this</span>.props.site&#125;&lt;/a&gt;</div><div class="line">        );</div><div class="line">    &#125;</div><div class="line">&#125;</div><div class="line"><span class="type">ReactDOM</span>.render(&lt;<span class="type">WebSite</span> name=<span class="string">"菜鸟教程"</span> site=<span class="string">" http://www.runoob.com"</span> /&gt;, mountNode);</div></pre></td></tr></table></figure>
<h2 id="React-State-状态"><a href="#React-State-状态" class="headerlink" title="React State(状态)"></a>React State(状态)</h2><p>把组件看成是一个状态机（State Machines）。通过与用户的交互，实现不同状态，然后渲染 UI，让用户界面和数据保持一致。React 里，只需更新组件的 state，然后根据新的 state 重新渲染用户界面（不要操作 DOM）。</p>
<h3 id="constructor-初始状态"><a href="#constructor-初始状态" class="headerlink" title="constructor()初始状态"></a>constructor()初始状态</h3><h4 id="实例：点击喜欢-amp-不喜欢"><a href="#实例：点击喜欢-amp-不喜欢" class="headerlink" title="实例：点击喜欢&amp;不喜欢"></a>实例：点击喜欢&amp;不喜欢</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div></pre></td><td class="code"><pre><div class="line"><span class="class"><span class="keyword">class</span> <span class="title">LikeButton</span> <span class="keyword">extends</span> <span class="title">React</span>.<span class="title">Component</span></span>&#123;</div><div class="line">    <span class="keyword">constructor</span>() &#123;</div><div class="line">        <span class="keyword">super</span>();</div><div class="line">        <span class="keyword">this</span>.state =&#123;<span class="attr">liked</span>: <span class="literal">false</span>&#125;;</div><div class="line">    &#125;</div><div class="line">    handleClick() &#123;</div><div class="line">        <span class="keyword">this</span>.setState(&#123;</div><div class="line">            <span class="attr">liked</span>: !<span class="keyword">this</span>.state.liked</div><div class="line">        &#125;);</div><div class="line">    &#125;</div><div class="line">    render() &#123;</div><div class="line">        <span class="keyword">let</span> text = <span class="keyword">this</span>.state.liked ? <span class="string">'喜欢'</span> : <span class="string">'不喜欢'</span>;</div><div class="line">        <span class="keyword">return</span> (</div><div class="line">            <span class="xml"><span class="tag">&lt;<span class="name">p</span> <span class="attr">onClick</span>=<span class="string">&#123;this.handleClick.bind(this)&#125;</span>&gt;</span>你<span class="tag">&lt;<span class="name">b</span>&gt;</span>&#123;text&#125;<span class="tag">&lt;/<span class="name">b</span>&gt;</span>我。点我切换状态。<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span></div><div class="line">        );</div><div class="line">    &#125;</div><div class="line">&#125;;</div><div class="line">ReactDOM.render(<span class="xml"><span class="tag">&lt;<span class="name">LikeButton</span> /&gt;</span>, mountNode);</span></div></pre></td></tr></table></figure>
<figure class="highlight pf"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line">handleClick = ()=&gt;&#123;</div><div class="line">    this.<span class="built_in">set</span>State(&#123;</div><div class="line">        liked: !this.<span class="keyword">state</span>.liked</div><div class="line">    &#125;);</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<p>constructor是组件的构造函数，会在创建实例时自动调用。<br>…args表示组件参数，super(…args)是 ES6 规定的写法。<br>this.state对象用来存放内部状态，这里是定义初始状态，也就是一个对象，这个对象可以通过 this.state 属性读取。当用户点击组件，导致状态变化，this.setState 方法就修改状态值，每次修改以后，自动调用 this.render 方法，再次渲染组件。<br>onClick={this.handleClick.bind(this)}绑定事件，返回参数。<br>e.target.value绑定事件后的返回值。</p>
<h4 id="实例：输入文字实时显示"><a href="#实例：输入文字实时显示" class="headerlink" title="实例：输入文字实时显示"></a>实例：输入文字实时显示</h4><figure class="highlight scala"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div></pre></td><td class="code"><pre><div class="line"><span class="class"><span class="keyword">class</span> <span class="title">MyTitle</span> <span class="keyword">extends</span> <span class="title">React</span>.<span class="title">Component</span></span>&#123;</div><div class="line">    constructor() &#123;</div><div class="line">        <span class="keyword">super</span>();</div><div class="line">        <span class="keyword">this</span>.state =&#123;name: <span class="symbol">'can</span> you speek <span class="type">English</span>!'&#125;;</div><div class="line">    &#125;</div><div class="line">    handleChange(e) &#123;</div><div class="line">        let name = e.target.value;</div><div class="line">        <span class="keyword">this</span>.setState(&#123;</div><div class="line">            name: name</div><div class="line">        &#125;);</div><div class="line">    &#125;</div><div class="line">    render() &#123;</div><div class="line">        <span class="keyword">return</span> (</div><div class="line">            &lt;div&gt;</div><div class="line">                &lt;input <span class="class"><span class="keyword">type</span></span>=<span class="string">"text"</span> onChange=&#123;<span class="keyword">this</span>.handleChange.bind(<span class="keyword">this</span>)&#125; /&gt;</div><div class="line">                &lt;p&gt;Jimmey-Jiang,&#123;<span class="keyword">this</span>.state.name&#125;&lt;/p&gt;</div><div class="line">            &lt;/div&gt;</div><div class="line">        );</div><div class="line">    &#125;</div><div class="line">&#125;</div><div class="line"><span class="type">ReactDOM</span>.render(&lt;<span class="type">MyTitle</span> /&gt;, mountNode);</div></pre></td></tr></table></figure>
<h2 id="React-Props"><a href="#React-Props" class="headerlink" title="React Props"></a>React Props</h2><p>props通过组件获取数据</p>
<h3 id="基础语法-1"><a href="#基础语法-1" class="headerlink" title="基础语法"></a>基础语法</h3><h4 id="实例：数据传递"><a href="#实例：数据传递" class="headerlink" title="实例：数据传递"></a>实例：数据传递</h4><figure class="highlight scala"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div></pre></td><td class="code"><pre><div class="line"><span class="class"><span class="keyword">class</span> <span class="title">HelloMessage</span> <span class="keyword">extends</span> <span class="title">React</span>.<span class="title">Component</span></span>&#123;</div><div class="line">	render()&#123;</div><div class="line">		<span class="keyword">return</span> &lt;h1&gt;<span class="type">Hello</span> &#123;<span class="keyword">this</span>.props.name&#125;&lt;/h1&gt;;</div><div class="line">	&#125;</div><div class="line">&#125;</div><div class="line"></div><div class="line"><span class="type">ReactDOM</span>.render(</div><div class="line">	&lt;<span class="type">HelloMessage</span> name=<span class="string">"Runoob"</span> /&gt;,mountNode</div><div class="line">);</div></pre></td></tr></table></figure>
<p>实例中 name 属性通过 this.props.name 来获取。</p>
<h3 id="defaultProps默认值"><a href="#defaultProps默认值" class="headerlink" title="defaultProps默认值"></a>defaultProps默认值</h3><p>默认Props：你可以通过defaultProps()方法为props设置默认值，实例如下：<br><figure class="highlight scala"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div></pre></td><td class="code"><pre><div class="line"><span class="class"><span class="keyword">class</span> <span class="title">HelloMessage</span> <span class="keyword">extends</span> <span class="title">React</span>.<span class="title">Component</span></span>&#123;</div><div class="line">    render()&#123;</div><div class="line">        <span class="keyword">return</span> &lt;h1&gt;<span class="type">Hello</span> &#123;<span class="keyword">this</span>.props.name&#125;&lt;/h1&gt;;</div><div class="line">    &#125;</div><div class="line">&#125;</div><div class="line"><span class="type">HelloMessage</span>.defaultProps = &#123;</div><div class="line">    name: <span class="symbol">'Runoo</span>b'</div><div class="line">&#125;</div><div class="line"><span class="type">ReactDOM</span>.render(&lt;<span class="type">HelloMessage</span> /&gt;,mountNode);</div></pre></td></tr></table></figure></p>
<figure class="highlight scala"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div></pre></td><td class="code"><pre><div class="line"><span class="class"><span class="keyword">class</span> <span class="title">WebSite</span> <span class="keyword">extends</span> <span class="title">React</span>.<span class="title">Component</span></span>&#123;</div><div class="line">    render() &#123;</div><div class="line">        <span class="keyword">return</span> (</div><div class="line">            &lt;div className=&#123;<span class="keyword">this</span>.props.name&#125;&gt;&lt;<span class="type">Name</span> name=&#123;<span class="keyword">this</span>.props.name&#125; /&gt;&lt;<span class="type">Link</span> site=&#123;<span class="keyword">this</span>.props.site&#125; /&gt;&lt;/div&gt;</div><div class="line">        );</div><div class="line">    &#125;</div><div class="line">&#125;</div><div class="line"><span class="type">WebSite</span>.defaultProps =&#123;</div><div class="line">	name: <span class="string">"菜鸟教程"</span>,</div><div class="line">	site: <span class="string">"http://www.runoob.com"</span></div><div class="line">&#125;</div><div class="line"><span class="class"><span class="keyword">class</span> <span class="title">Name</span> <span class="keyword">extends</span> <span class="title">React</span>.<span class="title">Component</span></span>&#123;</div><div class="line">    render() &#123;</div><div class="line">        <span class="keyword">return</span> (</div><div class="line">            &lt;h1&gt;&#123;<span class="keyword">this</span>.props.name&#125;&lt;/h1&gt;</div><div class="line">        );</div><div class="line">    &#125;</div><div class="line">&#125;</div><div class="line"><span class="class"><span class="keyword">class</span> <span class="title">Link</span> <span class="keyword">extends</span> <span class="title">React</span>.<span class="title">Component</span></span>&#123;</div><div class="line">    render() &#123;</div><div class="line">        <span class="keyword">return</span> (</div><div class="line">            &lt;a href=&#123;<span class="keyword">this</span>.props.site&#125;&gt;&#123;<span class="keyword">this</span>.props.site&#125;&lt;/a&gt;</div><div class="line">        );</div><div class="line">    &#125;</div><div class="line">&#125;</div><div class="line"><span class="type">ReactDOM</span>.render(&lt;<span class="type">WebSite</span> /&gt;, mountNode);</div></pre></td></tr></table></figure>
<h3 id="this-props-children"><a href="#this-props-children" class="headerlink" title="this.props.children"></a>this.props.children</h3><h4 id="实例：点击次数"><a href="#实例：点击次数" class="headerlink" title="实例：点击次数"></a>实例：点击次数</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div></pre></td><td class="code"><pre><div class="line"><span class="class"><span class="keyword">class</span> <span class="title">NotesList</span> <span class="keyword">extends</span> <span class="title">React</span>.<span class="title">Component</span></span>&#123;</div><div class="line">    render()&#123;</div><div class="line">        <span class="keyword">return</span>(</div><div class="line">            <span class="xml"><span class="tag">&lt;<span class="name">ol</span>&gt;</span>&#123;</span></div><div class="line">                React.Children.map(this.props.children,function(child)&#123;</div><div class="line">                    console.log(child);</div><div class="line">                    return <span class="tag">&lt;<span class="name">li</span>&gt;</span>&#123;child&#125;<span class="tag">&lt;/<span class="name">li</span>&gt;</span></div><div class="line">                &#125;)</div><div class="line">            &#125;<span class="tag">&lt;/<span class="name">ol</span>&gt;</span></div><div class="line">        );</div><div class="line">    &#125;</div><div class="line">&#125;</div><div class="line"></div><div class="line">ReactDOM.render(</div><div class="line">    <span class="xml"><span class="tag">&lt;<span class="name">NotesList</span>&gt;</span></span></div><div class="line">        <span class="tag">&lt;<span class="name">span</span>&gt;</span>hello<span class="tag">&lt;/<span class="name">span</span>&gt;</span></div><div class="line">        <span class="tag">&lt;<span class="name">span</span>&gt;</span>world<span class="tag">&lt;/<span class="name">span</span>&gt;</span></div><div class="line">        <span class="tag">&lt;<span class="name">span</span>&gt;</span>world<span class="tag">&lt;/<span class="name">span</span>&gt;</span></div><div class="line">        <span class="tag">&lt;<span class="name">span</span>&gt;</span>world<span class="tag">&lt;/<span class="name">span</span>&gt;</span></div><div class="line">    <span class="tag">&lt;/<span class="name">NotesList</span>&gt;</span>,</div><div class="line">    mountNode</div><div class="line">);</div></pre></td></tr></table></figure>
<h3 id="PropTypes验证"><a href="#PropTypes验证" class="headerlink" title="PropTypes验证"></a>PropTypes验证</h3><p>Props 使用propTypes，它可以保证我们的应用组件被正确使用，React.PropTypes 提供很多验证器 (validator) 来验证传入数据是否有效。当向 props 传入无效数据时，JavaScript 控制台会抛出警告。</p>
<h4 id="实例：判断组件属性title是否为字符串："><a href="#实例：判断组件属性title是否为字符串：" class="headerlink" title="实例：判断组件属性title是否为字符串："></a>实例：判断组件属性title是否为字符串：</h4><figure class="highlight scala"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div></pre></td><td class="code"><pre><div class="line">const name = <span class="number">123</span>;</div><div class="line">console.log(name);</div><div class="line"><span class="class"><span class="keyword">class</span> <span class="title">HelloMessage</span> <span class="keyword">extends</span> <span class="title">React</span>.<span class="title">Component</span></span>&#123;</div><div class="line">    render()&#123;</div><div class="line">        <span class="keyword">return</span> &lt;h1&gt;<span class="type">Hello</span> &#123;<span class="keyword">this</span>.props.title&#125;&lt;/h1&gt;;</div><div class="line">    &#125;</div><div class="line">&#125;</div><div class="line"><span class="type">HelloMessage</span>.propTypes = &#123;</div><div class="line">    title: <span class="type">React</span>.<span class="type">PropTypes</span>.string</div><div class="line">&#125;</div><div class="line"><span class="type">ReactDOM</span>.render(&lt;<span class="type">HelloMessage</span> title=&#123;name&#125; /&gt;,mountNode);</div></pre></td></tr></table></figure>
<blockquote>
<p>如果 title 使用数字变量，控制台会出现以下错误信息：</p>
</blockquote>
<figure class="highlight routeros"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">Warning: Failed prop type: Invalid prop `title` of<span class="built_in"> type </span>`number` supplied <span class="keyword">to</span> `HelloMessage`, expected `string`.</div></pre></td></tr></table></figure>
<h3 id="PropTypes属性值"><a href="#PropTypes属性值" class="headerlink" title="PropTypes属性值"></a>PropTypes属性值</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div><div class="line">37</div><div class="line">38</div><div class="line">39</div><div class="line">40</div><div class="line">41</div><div class="line">42</div><div class="line">43</div><div class="line">44</div><div class="line">45</div><div class="line">46</div><div class="line">47</div><div class="line">48</div><div class="line">49</div><div class="line">50</div><div class="line">51</div><div class="line">52</div><div class="line">53</div><div class="line">54</div><div class="line">55</div><div class="line">56</div><div class="line">57</div><div class="line">58</div><div class="line">59</div><div class="line">60</div><div class="line">61</div><div class="line">62</div><div class="line">63</div><div class="line">64</div><div class="line">65</div><div class="line">66</div><div class="line">67</div></pre></td><td class="code"><pre><div class="line">.propTypes = &#123;</div><div class="line">	<span class="comment">// 可以声明 prop 为指定的 JS 基本数据类型，默认情况，这些数据是可选的</span></div><div class="line">	optionalArray: React.PropTypes.array,</div><div class="line">	<span class="attr">optionalBool</span>: React.PropTypes.bool,</div><div class="line">	<span class="attr">optionalFunc</span>: React.PropTypes.func,</div><div class="line">	<span class="attr">optionalNumber</span>: React.PropTypes.number,</div><div class="line">	<span class="attr">optionalObject</span>: React.PropTypes.object,</div><div class="line">	<span class="attr">optionalString</span>: React.PropTypes.string,</div><div class="line">	<span class="attr">optionalSymbol</span>: React.PropTypes.symbol,</div><div class="line"></div><div class="line">	<span class="comment">// 可以被渲染的对象 numbers, strings, elements 或 array</span></div><div class="line">	optionalNode: React.PropTypes.node,</div><div class="line"></div><div class="line">	<span class="comment">//  React 元素</span></div><div class="line">	optionalElement: React.PropTypes.element,</div><div class="line"></div><div class="line">	<span class="comment">// 用 JS 的 instanceof 操作符声明 prop 为类的实例。</span></div><div class="line">	optionalMessage: React.PropTypes.instanceOf(Message),</div><div class="line"></div><div class="line">	<span class="comment">// 用 enum 来限制 prop 只接受指定的值。</span></div><div class="line">	optionalEnum: React.PropTypes.oneOf([<span class="string">'News'</span>, <span class="string">'Photos'</span>]),</div><div class="line"></div><div class="line">	<span class="comment">// 可以是多个对象类型中的一个</span></div><div class="line">	optionalUnion: React.PropTypes.oneOfType([</div><div class="line">		React.PropTypes.string,</div><div class="line">		React.PropTypes.number,</div><div class="line">		React.PropTypes.instanceOf(Message)</div><div class="line">	]),</div><div class="line"></div><div class="line">	<span class="comment">// 指定类型组成的数组</span></div><div class="line">	optionalArrayOf: React.PropTypes.arrayOf(React.PropTypes.number),</div><div class="line"></div><div class="line">	<span class="comment">// 指定类型的属性构成的对象</span></div><div class="line">	optionalObjectOf: React.PropTypes.objectOf(React.PropTypes.number),</div><div class="line"></div><div class="line">	<span class="comment">// 特定 shape 参数的对象</span></div><div class="line">	optionalObjectWithShape: React.PropTypes.shape(&#123;</div><div class="line">		<span class="attr">color</span>: React.PropTypes.string,</div><div class="line">		<span class="attr">fontSize</span>: React.PropTypes.number</div><div class="line">	&#125;),</div><div class="line"></div><div class="line">	<span class="comment">// 任意类型加上 `isRequired` 来使 prop 不可空。</span></div><div class="line">	requiredFunc: React.PropTypes.func.isRequired,</div><div class="line"></div><div class="line">	<span class="comment">// 不可空的任意类型</span></div><div class="line">	requiredAny: React.PropTypes.any.isRequired,</div><div class="line"></div><div class="line">	<span class="comment">// 自定义验证器。如果验证失败需要返回一个 Error 对象。不要直接使用 `console.warn` 或抛异常，因为这样 `oneOfType` 会失效。</span></div><div class="line">	customProp(props, propName, componentName) &#123;</div><div class="line">		<span class="keyword">if</span> (!<span class="regexp">/matchme/</span>.test(props[propName])) &#123;</div><div class="line">		    <span class="keyword">return</span> <span class="keyword">new</span> <span class="built_in">Error</span>(</div><div class="line">				<span class="string">'Invalid prop `'</span> + propName + <span class="string">'` supplied to'</span> +</div><div class="line">				<span class="string">' `'</span> + componentName + <span class="string">'`. Validation failed.'</span></div><div class="line">		    );</div><div class="line">		&#125;</div><div class="line">	&#125;,</div><div class="line">	<span class="attr">customArrayProp</span>: React.PropTypes.arrayOf(</div><div class="line">		<span class="function"><span class="keyword">function</span>(<span class="params">propValue, key, componentName, location, propFullName</span>) </span>&#123;</div><div class="line">			<span class="keyword">if</span> (!<span class="regexp">/matchme/</span>.test(propValue[key])) &#123;</div><div class="line">			    <span class="keyword">return</span> <span class="keyword">new</span> <span class="built_in">Error</span>(</div><div class="line">					<span class="string">'Invalid prop `'</span> + propFullName + <span class="string">'` supplied to'</span> +</div><div class="line">					<span class="string">' `'</span> + componentName + <span class="string">'`. Validation failed.'</span></div><div class="line">			    );</div><div class="line">			&#125;</div><div class="line">		&#125;</div><div class="line">	)</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<h3 id="state和props区别"><a href="#state和props区别" class="headerlink" title="state和props区别"></a>state和props区别</h3><p>在于props是不可变的，而子组件只能通过props来获取数据。<br>而state可以根据与用户交互来改变。这就是为什么有些容器组件需要定义state来更新和修改数据。</p>
<p>以下实例演示了如何在应用中组合使用state和props。我们可以在父组件中设置state，并通过在子组件上使用props将其传递到子组件上。在render函数中,我们设置name和site来获取父组件传递过来的数据。</p>
<h4 id="实例：链接-1"><a href="#实例：链接-1" class="headerlink" title="实例：链接"></a>实例：链接</h4><figure class="highlight scala"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div></pre></td><td class="code"><pre><div class="line"><span class="class"><span class="keyword">class</span> <span class="title">WebSite</span> <span class="keyword">extends</span> <span class="title">React</span>.<span class="title">Component</span></span>&#123;</div><div class="line">	constructor(props) &#123;</div><div class="line">		<span class="keyword">super</span>(props);</div><div class="line">		<span class="keyword">this</span>.state = &#123;</div><div class="line">			name: <span class="string">"菜鸟教程"</span>,</div><div class="line">			site: <span class="string">"http://www.runoob.com"</span></div><div class="line">		&#125;;</div><div class="line">	&#125;</div><div class="line">	render()&#123;</div><div class="line">		<span class="keyword">return</span> &lt;div&gt;&lt;<span class="type">Name</span> name=&#123;<span class="keyword">this</span>.state.name&#125; /&gt;&lt;<span class="type">Link</span> site=&#123;<span class="keyword">this</span>.state.site&#125; /&gt;&lt;/div&gt;</div><div class="line">	&#125;</div><div class="line">&#125;</div><div class="line"><span class="class"><span class="keyword">class</span> <span class="title">Name</span> <span class="keyword">extends</span> <span class="title">React</span>.<span class="title">Component</span></span>&#123;</div><div class="line">	render()&#123;</div><div class="line">		<span class="keyword">return</span> &lt;h1&gt;&#123;<span class="keyword">this</span>.props.name&#125;&lt;/h1&gt;</div><div class="line">	&#125;</div><div class="line">&#125;</div><div class="line"><span class="class"><span class="keyword">class</span> <span class="title">Link</span> <span class="keyword">extends</span> <span class="title">React</span>.<span class="title">Component</span></span>&#123;</div><div class="line">	render()&#123;</div><div class="line">		<span class="keyword">return</span> &lt;a href=&#123;<span class="keyword">this</span>.props.site&#125;&gt;&#123;<span class="keyword">this</span>.props.site&#125;&lt;/a&gt;</div><div class="line">	&#125;</div><div class="line">&#125;</div><div class="line"></div><div class="line"><span class="type">ReactDOM</span>.render(&lt;<span class="type">WebSite</span> /&gt;,mountNode);</div></pre></td></tr></table></figure>
<h2 id="React-组件-API"><a href="#React-组件-API" class="headerlink" title="React 组件 API"></a>React 组件 API</h2><p>在本章节中我们将讨论 React 组件 API。</p>
<h3 id="基础语法-2"><a href="#基础语法-2" class="headerlink" title="基础语法"></a>基础语法</h3><h3 id="mixins去重"><a href="#mixins去重" class="headerlink" title="mixins去重"></a>mixins去重</h3><figure class="highlight scala"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div></pre></td><td class="code"><pre><div class="line">const <span class="type">ExampleMixin</span> = &#123;</div><div class="line">    componentDidMount()&#123;</div><div class="line">        <span class="comment">// bind some event listeners here</span></div><div class="line">    &#125;</div><div class="line">    componentWillUnmount()&#123;</div><div class="line">        <span class="comment">// unbind those events here!</span></div><div class="line">    &#125;</div><div class="line">&#125;</div><div class="line"><span class="class"><span class="keyword">class</span> <span class="title">ExampleComponent</span> <span class="keyword">extends</span> <span class="title">React</span>.<span class="title">Component</span></span>&#123;</div><div class="line">	mixins: [<span class="type">ExampleMixin</span>];</div><div class="line">	render()&#123;&#125;</div><div class="line">&#125;</div><div class="line"><span class="class"><span class="keyword">class</span> <span class="title">AnotherComponent</span> <span class="keyword">extends</span> <span class="title">React</span>.<span class="title">Component</span></span>&#123;</div><div class="line">	mixins: [<span class="type">ExampleMixin</span>];</div><div class="line">	render()&#123;&#125;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<!-- 设置状态:setState
setState(object nextState[, function callback])
参数说明
nextState，将要设置的新状态，该状态会和当前的state合并
callback，可选参数，回调函数。该函数会在setState设置成功，且组件重新渲染后调用。
合并nextState和当前state，并重新渲染组件。setState是React事件处理函数中和请求回调函数中触发UI更新的主要方法。
关于setState
不能在组件内部通过this.state修改状态，因为该状态会在调用setState()后被替换。
setState()并不会立即改变this.state，而是创建一个即将处理的state。setState()并不一定是同步的，为了提升性能React会批量执行state和DOM渲染。
setState()总是会触发一次组件重绘，除非在shouldComponentUpdate()中实现了一些条件渲染逻辑。 -->
<h4 id="实例：点击次数-1"><a href="#实例：点击次数-1" class="headerlink" title="实例：点击次数"></a>实例：点击次数</h4><figure class="highlight scala"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div></pre></td><td class="code"><pre><div class="line"><span class="class"><span class="keyword">class</span> <span class="title">Counter</span> <span class="keyword">extends</span> <span class="title">React</span>.<span class="title">Component</span></span>&#123;</div><div class="line">	constructor()&#123;</div><div class="line">		<span class="keyword">super</span>();</div><div class="line">		<span class="keyword">this</span>.state = &#123;</div><div class="line">			clickCount: <span class="number">0</span></div><div class="line">		&#125;;</div><div class="line">	&#125;</div><div class="line">	handleClick()&#123;</div><div class="line">		<span class="keyword">this</span>.setState(&#123;</div><div class="line">			clickCount: <span class="keyword">this</span>.state.clickCount +<span class="number">1</span></div><div class="line">		&#125;);</div><div class="line">	&#125;</div><div class="line">	render()&#123;</div><div class="line">		<span class="keyword">return</span> &lt;h2 onClick=&#123;<span class="keyword">this</span>.handleClick.bind(<span class="keyword">this</span>)&#125;&gt;点我！点击次数为: &#123;<span class="keyword">this</span>.state.clickCount&#125;&lt;/h2&gt;;</div><div class="line">	&#125;</div><div class="line">&#125;</div><div class="line"><span class="type">ReactDOM</span>.render(&lt;<span class="type">Counter</span> /&gt;,mountNode);</div></pre></td></tr></table></figure>
<!-- 
实例中通过点击 h2 标签来使得点击计数器加 1。
替换状态：replaceState
replaceState(object nextState[, function callback])
nextState，将要设置的新状态，该状态会替换当前的state。
callback，可选参数，回调函数。该函数会在replaceState设置成功，且组件重新渲染后调用。
replaceState()方法与setState()类似，但是方法只会保留nextState中状态，原state不在nextState中的状态都会被删除。
设置属性：setProps
setProps(object nextProps[, function callback])
nextProps，将要设置的新属性，该状态会和当前的props合并
callback，可选参数，回调函数。该函数会在setProps设置成功，且组件重新渲染后调用。
设置组件属性，并重新渲染组件。
props相当于组件的数据流，它总是会从父组件向下传递至所有的子组件中。当和一个外部的JavaScript应用集成时，我们可能会需要向组件传递数据或通知ReactDOM.render()组件需要重新渲染，可以使用setProps()。
更新组件，我可以在节点上再次调用ReactDOM.render()，也可以通过setProps()方法改变组件属性，触发组件重新渲染。
替换属性：replaceProps
replaceProps(object nextProps[, function callback])
nextProps，将要设置的新属性，该属性会替换当前的props。
callback，可选参数，回调函数。该函数会在replaceProps设置成功，且组件重新渲染后调用。
replaceProps()方法与setProps类似，但它会删除原有
props
强制更新：forceUpdate
forceUpdate([function callback])
参数说明
callback，可选参数，回调函数。该函数会在组件render()方法调用后调用。
forceUpdate()方法会使组件调用自身的render()方法重新渲染组件，组件的子组件也会调用自己的render()。但是，组件重新渲染时，依然会读取this.props和this.state，如果状态没有改变，那么React只会更新DOM。
forceUpdate()方法适用于this.props和this.state之外的组件重绘（如：修改了this.state后），通过该方法通知React需要调用render()
一般来说，应该尽量避免使用forceUpdate()，而仅从this.props和this.state中读取状态并由React触发render()调用。
获取DOM节点：findDOMNode
DOMElement findDOMNode()
返回值：DOM元素DOMElement
如果组件已经挂载到DOM中，该方法返回对应的本地浏览器 DOM 元素。当render返回null 或 false时，this.findDOMNode()也会返回null。从DOM 中读取值的时候，该方法很有用，如：获取表单字段的值和做一些 DOM 操作。
判断组件挂载状态：isMounted
bool isMounted()
返回值：true或false，表示组件是否已挂载到DOM中
isMounted()方法用于判断组件是否已挂载到DOM中。可以使用该方法保证了setState()和forceUpdate()在异步场景下的调用不会出错。
本文参考：http://itbilu.com/javascript/react/EkACBdqKe.html -->
<h2 id="React-组件生命周期"><a href="#React-组件生命周期" class="headerlink" title="React 组件生命周期"></a>React 组件生命周期</h2><blockquote>
<p>组件的生命周期可分成三个状态：Mounting、Updating、Unmounting</p>
<h3 id="Mounting：已插入真实-DOM"><a href="#Mounting：已插入真实-DOM" class="headerlink" title="Mounting：已插入真实 DOM"></a>Mounting：已插入真实 DOM</h3></blockquote>
<h4 id="constructor-NaN"><a href="#constructor-NaN" class="headerlink" title="constructor()"></a>constructor()</h4><h4 id="componentWillMount"><a href="#componentWillMount" class="headerlink" title="componentWillMount()"></a>componentWillMount()</h4><p>在渲染前调用,在客户端也在服务端。</p>
<h4 id="render"><a href="#render" class="headerlink" title="render()"></a>render()</h4><p>在渲染时调用</p>
<h4 id="componentDidMount"><a href="#componentDidMount" class="headerlink" title="componentDidMount()"></a>componentDidMount()</h4><p>在第一次渲染后调用，只在客户端。之后组件已经生成了对应的DOM结构，可以通过this.getDOMNode()来进行访问。<br>如果你想和其他JavaScript框架一起使用，可以在这个方法中调用setTimeout, setInterval或者发送AJAX请求等操作(防止异部操作阻塞UI)。</p>
<h3 id="Updating：正在被重新渲染"><a href="#Updating：正在被重新渲染" class="headerlink" title="Updating：正在被重新渲染"></a>Updating：正在被重新渲染</h3><h4 id="componentWillReceiveProps"><a href="#componentWillReceiveProps" class="headerlink" title="componentWillReceiveProps()"></a>componentWillReceiveProps()</h4><p>在组件接收到一个新的prop时被调用。这个方法在初始化render时不会被调用。</p>
<h4 id="shouldComponentUpdate"><a href="#shouldComponentUpdate" class="headerlink" title="shouldComponentUpdate()"></a>shouldComponentUpdate()</h4><p>返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用。<br>可以在你确认不需要更新组件时使用。</p>
<h4 id="componentWillUpdate"><a href="#componentWillUpdate" class="headerlink" title="componentWillUpdate()"></a>componentWillUpdate()</h4><p>在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。</p>
<h4 id="render-1"><a href="#render-1" class="headerlink" title="render()"></a>render()</h4><h4 id="componentDidUpdate"><a href="#componentDidUpdate" class="headerlink" title="componentDidUpdate()"></a>componentDidUpdate()</h4><p>在组件完成更新后立即调用。在初始化时不会被调用。</p>
<h3 id="Unmounting：已移出真实-DOM"><a href="#Unmounting：已移出真实-DOM" class="headerlink" title="Unmounting：已移出真实 DOM"></a>Unmounting：已移出真实 DOM</h3><h4 id="componentWillUnmount"><a href="#componentWillUnmount" class="headerlink" title="componentWillUnmount()"></a>componentWillUnmount()</h4><p>在组件从 DOM 中移除的时候立刻被调用。</p>
<h4 id="实例：定时器，每隔100毫秒重新设置组件的透明度，并重新渲染"><a href="#实例：定时器，每隔100毫秒重新设置组件的透明度，并重新渲染" class="headerlink" title="实例：定时器，每隔100毫秒重新设置组件的透明度，并重新渲染"></a>实例：定时器，每隔100毫秒重新设置组件的透明度，并重新渲染</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div></pre></td><td class="code"><pre><div class="line"><span class="class"><span class="keyword">class</span> <span class="title">Hello</span> <span class="keyword">extends</span> <span class="title">React</span>.<span class="title">Component</span></span>&#123;</div><div class="line">	<span class="keyword">constructor</span>() &#123;</div><div class="line">		<span class="keyword">super</span>();</div><div class="line">		<span class="keyword">this</span>.state = &#123;</div><div class="line">			<span class="attr">opacity</span>: <span class="number">1.0</span></div><div class="line">		&#125;</div><div class="line">	&#125;</div><div class="line">	componentDidMount()&#123;</div><div class="line">		<span class="keyword">this</span>.timer = setInterval(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">			<span class="keyword">let</span> opacity = <span class="keyword">this</span>.state.opacity;</div><div class="line">			opacity -= <span class="number">.05</span>;</div><div class="line">			<span class="keyword">if</span>(opacity &lt; <span class="number">.1</span>)&#123;</div><div class="line">				opacity = <span class="number">1.0</span>;</div><div class="line">			&#125;</div><div class="line">			<span class="keyword">this</span>.setState(&#123;</div><div class="line">				<span class="attr">opacity</span>: opacity</div><div class="line">			&#125;)</div><div class="line"></div><div class="line">		&#125;.bind(<span class="keyword">this</span>),<span class="number">100</span>)</div><div class="line">	&#125;</div><div class="line">	render()&#123;</div><div class="line">		<span class="keyword">return</span>(</div><div class="line">			<span class="xml"><span class="tag">&lt;<span class="name">div</span> <span class="attr">style</span>=<span class="string">&#123;&#123;opacity:</span> <span class="attr">this.state.opacity</span>&#125;&#125;&gt;</span></span></div><div class="line">				Hello &#123;this.props.name&#125;</div><div class="line">			<span class="tag">&lt;/<span class="name">div</span>&gt;</span></div><div class="line">		)</div><div class="line">	&#125;</div><div class="line">&#125;</div><div class="line"></div><div class="line">ReactDOM.render(<span class="xml"><span class="tag">&lt;<span class="name">Hello</span> <span class="attr">name</span>=<span class="string">"world"</span> /&gt;</span>,mountNode);</span></div></pre></td></tr></table></figure>
<h4 id="实例：点击效果"><a href="#实例：点击效果" class="headerlink" title="实例：点击效果"></a>实例：点击效果</h4><p>以下实例初始化 state ， setNewnumber 用于更新 state。所有生命周期在 Content 组件中。<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div><div class="line">37</div><div class="line">38</div><div class="line">39</div><div class="line">40</div><div class="line">41</div><div class="line">42</div><div class="line">43</div><div class="line">44</div><div class="line">45</div><div class="line">46</div><div class="line">47</div><div class="line">48</div><div class="line">49</div><div class="line">50</div><div class="line">51</div><div class="line">52</div><div class="line">53</div></pre></td><td class="code"><pre><div class="line"><span class="class"><span class="keyword">class</span> <span class="title">Button</span> <span class="keyword">extends</span> <span class="title">React</span>.<span class="title">Component</span></span>&#123;</div><div class="line">	<span class="keyword">constructor</span>() &#123;</div><div class="line">		<span class="keyword">super</span>();</div><div class="line">		<span class="keyword">this</span>.state = &#123;</div><div class="line">			<span class="attr">data</span>:<span class="number">0</span></div><div class="line">		&#125;</div><div class="line">	&#125;</div><div class="line">	setNewNumber()&#123;</div><div class="line">		<span class="keyword">this</span>.setState(&#123;</div><div class="line">			<span class="attr">data</span>: <span class="keyword">this</span>.state.data + <span class="number">1</span></div><div class="line">		&#125;)</div><div class="line">	&#125;</div><div class="line">	render()&#123;</div><div class="line">		<span class="keyword">return</span>(</div><div class="line">			<span class="xml"><span class="tag">&lt;<span class="name">div</span>&gt;</span></span></div><div class="line">				<span class="tag">&lt;<span class="name">button</span> <span class="attr">onClick</span>=<span class="string">&#123;this.setNewNumber.bind(this)&#125;</span>&gt;</span>INCREMENT<span class="tag">&lt;/<span class="name">button</span>&gt;</span></div><div class="line">				<span class="tag">&lt;<span class="name">Content</span> <span class="attr">myNumber</span>=<span class="string">&#123;this.state.data&#125;</span>&gt;</span><span class="tag">&lt;/<span class="name">Content</span>&gt;</span></div><div class="line">			<span class="tag">&lt;/<span class="name">div</span>&gt;</span></div><div class="line">		)</div><div class="line">	&#125;</div><div class="line">&#125;</div><div class="line"><span class="class"><span class="keyword">class</span> <span class="title">Content</span> <span class="keyword">extends</span> <span class="title">React</span>.<span class="title">Component</span></span>&#123;</div><div class="line">	componentWillMount()&#123;</div><div class="line">		<span class="built_in">console</span>.log(<span class="string">'Component WILL MOUNT!'</span>)</div><div class="line">	&#125;</div><div class="line">	componentDidMount()&#123;</div><div class="line">		<span class="built_in">console</span>.log(<span class="string">'Component DID MOUNT!'</span>)</div><div class="line">	&#125;</div><div class="line">	componentWillReceiveProps(newProps) &#123;</div><div class="line">		<span class="built_in">console</span>.log(<span class="string">'Component WILL RECEIVE PROPS!'</span>)</div><div class="line">	&#125;</div><div class="line">	shouldComponentUpdate(newProps, newState) &#123;</div><div class="line">		<span class="keyword">return</span> <span class="literal">true</span>;</div><div class="line">	&#125;</div><div class="line">	componentWillUpdate(nextProps, nextState) &#123;</div><div class="line">		<span class="built_in">console</span>.log(<span class="string">'Component WILL UPDATE!'</span>);</div><div class="line">	&#125;</div><div class="line">	componentDidUpdate(prevProps, prevState) &#123;</div><div class="line">		<span class="built_in">console</span>.log(<span class="string">'Component DID UPDATE!'</span>)</div><div class="line">	&#125;</div><div class="line">	componentWillUnmount()&#123;</div><div class="line">		<span class="built_in">console</span>.log(<span class="string">'Component WILL UNMOUNT!'</span>)</div><div class="line">	&#125;</div><div class="line">	render()&#123;</div><div class="line">		<span class="keyword">return</span>(</div><div class="line">			<span class="xml"><span class="tag">&lt;<span class="name">div</span>&gt;</span></span></div><div class="line">				<span class="tag">&lt;<span class="name">h3</span>&gt;</span>&#123;this.props.myNumber&#125;<span class="tag">&lt;/<span class="name">h3</span>&gt;</span></div><div class="line">			<span class="tag">&lt;/<span class="name">div</span>&gt;</span></div><div class="line">		)</div><div class="line">	&#125;</div><div class="line">&#125;</div><div class="line"></div><div class="line">ReactDOM.render(<span class="xml"><span class="tag">&lt;<span class="name">Button</span> /&gt;</span>,mountNode);</span></div></pre></td></tr></table></figure></p>
<h4 id="实例：统计时间"><a href="#实例：统计时间" class="headerlink" title="实例：统计时间"></a>实例：统计时间</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div></pre></td><td class="code"><pre><div class="line"><span class="class"><span class="keyword">class</span> <span class="title">Timer</span> <span class="keyword">extends</span> <span class="title">React</span>.<span class="title">Component</span></span>&#123;</div><div class="line">  <span class="keyword">constructor</span>(props) &#123;</div><div class="line">    <span class="keyword">super</span>(props);</div><div class="line">    <span class="keyword">this</span>.state = &#123;<span class="attr">secondsElapsed</span>: <span class="number">0</span>&#125;;</div><div class="line">  &#125;</div><div class="line">  tick()&#123;</div><div class="line">    <span class="keyword">this</span>.setState(<span class="function">(<span class="params">prevState</span>) =&gt;</span> (&#123;</div><div class="line">      <span class="attr">secondsElapsed</span>: prevState.secondsElapsed + <span class="number">1</span></div><div class="line">    &#125;));</div><div class="line">  &#125;</div><div class="line">  componentDidMount()&#123;</div><div class="line">    <span class="keyword">this</span>.interval = setInterval(<span class="function"><span class="params">()</span> =&gt;</span> <span class="keyword">this</span>.tick(), <span class="number">1000</span>);</div><div class="line">  &#125;</div><div class="line">  componentWillUnmount()&#123;</div><div class="line">    clearInterval(<span class="keyword">this</span>.interval);</div><div class="line">  &#125;</div><div class="line">  render()&#123;</div><div class="line">    <span class="keyword">return</span> (</div><div class="line">      <span class="xml"><span class="tag">&lt;<span class="name">div</span>&gt;</span>Seconds Elapsed: &#123;this.state.secondsElapsed&#125;<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></div><div class="line">    );</div><div class="line">  &#125;</div><div class="line">&#125;</div><div class="line"></div><div class="line">ReactDOM.render(<span class="xml"><span class="tag">&lt;<span class="name">Timer</span> /&gt;</span>, mountNode);</span></div></pre></td></tr></table></figure>
<h2 id="Lists-and-Keys列表遍历"><a href="#Lists-and-Keys列表遍历" class="headerlink" title="Lists and Keys列表遍历"></a>Lists and Keys列表遍历</h2><p>JSX 允许在模板中插入数组，数组会自动展开所有成员：</p>
<figure class="highlight dust"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div></pre></td><td class="code"><pre><div class="line"><span class="xml">const arr = [</span></div><div class="line">    <span class="tag">&lt;<span class="name">h1</span>&gt;</span>菜鸟教程<span class="tag">&lt;/<span class="name">h1</span>&gt;</span>,</div><div class="line">    <span class="tag">&lt;<span class="name">h2</span>&gt;</span>学的不仅是技术，更是梦想！<span class="tag">&lt;/<span class="name">h2</span>&gt;</span>,</div><div class="line">];</div><div class="line">ReactDOM.render(</div><div class="line">    <span class="tag">&lt;<span class="name">div</span>&gt;</span><span class="template-variable">&#123;arr&#125;</span><span class="xml"><span class="tag">&lt;/<span class="name">div</span>&gt;</span>,mountNode</span></div><div class="line">);</div></pre></td></tr></table></figure>
<p><a href="demo/index6.html">index6</a></p>
<h3 id="Array-map"><a href="#Array-map" class="headerlink" title="Array.map"></a>Array.map</h3><figure class="highlight typescript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">const</span> numbers = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>, <span class="number">5</span>];</div><div class="line"><span class="keyword">const</span> doubled = numbers.map(<span class="function">(<span class="params"><span class="built_in">number</span></span>) =&gt;</span> <span class="built_in">number</span> * <span class="number">2</span>);</div><div class="line"><span class="built_in">console</span>.log(doubled);</div></pre></td></tr></table></figure>
<figure class="highlight maxima"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div></pre></td><td class="code"><pre><div class="line">const numbers = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>, <span class="number">5</span>];</div><div class="line">const listItems = numbers.<span class="built_in">map</span>((number,<span class="built_in">key</span>) =&gt;</div><div class="line">	&lt;<span class="built_in">li</span> <span class="built_in">key</span>=&#123;<span class="built_in">key</span>&#125;&gt;&#123;number&#125;&lt;/<span class="built_in">li</span>&gt;</div><div class="line">);</div><div class="line">console.<span class="built_in">log</span>(listItems);</div><div class="line">ReactDOM.render(&lt;ul&gt;&#123;listItems&#125;&lt;/ul&gt;,mountNode);</div><div class="line"></div><div class="line">const listItems = numbers.<span class="built_in">map</span>(function(number,keys)&#123;</div><div class="line">	<span class="built_in">return</span>(</div><div class="line">		&lt;<span class="built_in">li</span> <span class="built_in">key</span>=&#123;keys&#125;&gt;</div><div class="line">			&#123;number&#125;</div><div class="line">		&lt;/<span class="built_in">li</span>&gt;</div><div class="line">	)</div><div class="line">&#125;);</div></pre></td></tr></table></figure>
<h3 id="Array-forEach-遍历"><a href="#Array-forEach-遍历" class="headerlink" title="Array.forEach 遍历"></a>Array.forEach 遍历</h3><figure class="highlight php"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">Array</span>.<span class="keyword">forEach</span>((e) =&gt; &#123;</div><div class="line">	alert(e);</div><div class="line">&#125;)</div><div class="line"></div><div class="line"><span class="keyword">Array</span>.<span class="keyword">forEach</span>(<span class="function"><span class="keyword">function</span><span class="params">(e)</span></span>&#123;</div><div class="line">	alert(e);</div><div class="line">&#125;)</div></pre></td></tr></table></figure>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">let</span> repos = <span class="keyword">this</span>.state.data.items;</div><div class="line"><span class="keyword">let</span> repoList = [];</div><div class="line">repos.forEach(<span class="function">(<span class="params">p,keys</span>) =&gt;</span> &#123;</div><div class="line">	<span class="keyword">let</span> item = <span class="xml"><span class="tag">&lt;<span class="name">li</span> <span class="attr">key</span>=<span class="string">&#123;keys&#125;</span>&gt;</span><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&#123;p.html_url&#125;</span>&gt;</span>&#123;p.name&#125;<span class="tag">&lt;/<span class="name">a</span>&gt;</span>(&#123;p.stargazers_count&#125; stars)<span class="tag">&lt;<span class="name">br</span> /&gt;</span>&#123;p.description&#125;<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span>;</div><div class="line">	repoList.push(item);</div><div class="line">&#125;)</div><div class="line"></div><div class="line"><span class="keyword">let</span> repos = <span class="keyword">this</span>.state.data.items;</div><div class="line"><span class="keyword">let</span> repoList = repos.map(<span class="function"><span class="keyword">function</span>(<span class="params">repo,index</span>)</span>&#123;</div><div class="line">    <span class="keyword">return</span>(</div><div class="line">        <span class="xml"><span class="tag">&lt;<span class="name">li</span> <span class="attr">key</span>=<span class="string">&#123;index&#125;</span>&gt;</span></span></div><div class="line">            <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&#123;repo.html_url&#125;</span>&gt;</span>&#123;repo.name&#125;<span class="tag">&lt;/<span class="name">a</span>&gt;</span>(&#123;repo.stargazers_count&#125; stars)<span class="tag">&lt;<span class="name">br</span> /&gt;</span></div><div class="line">            &#123;repo.description&#125;</div><div class="line">        <span class="tag">&lt;/<span class="name">li</span>&gt;</span>   </div><div class="line">    );</div><div class="line">&#125;);</div></pre></td></tr></table></figure>
<h3 id="Array-splice-删除"><a href="#Array-splice-删除" class="headerlink" title="Array.splice 删除"></a>Array.splice 删除</h3><h3 id="Array-filter"><a href="#Array-filter" class="headerlink" title="Array.filter"></a>Array.filter</h3><p>方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素</p>
<h3 id="Array-every"><a href="#Array-every" class="headerlink" title="Array.every"></a>Array.every</h3><h3 id="Array-push"><a href="#Array-push" class="headerlink" title="Array.push"></a>Array.push</h3><h2 id="Handling-Events绑定事件"><a href="#Handling-Events绑定事件" class="headerlink" title="Handling Events绑定事件"></a>Handling Events绑定事件</h2><h2 id="Forms表单"><a href="#Forms表单" class="headerlink" title="Forms表单"></a>Forms表单</h2><h3 id="基础语法-3"><a href="#基础语法-3" class="headerlink" title="基础语法"></a>基础语法</h3><h4 id="实例：输入文字实时显示-1"><a href="#实例：输入文字实时显示-1" class="headerlink" title="实例：输入文字实时显示"></a>实例：输入文字实时显示</h4><figure class="highlight scala"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div></pre></td><td class="code"><pre><div class="line"><span class="class"><span class="keyword">class</span> <span class="title">HelloMessage</span> <span class="keyword">extends</span> <span class="title">React</span>.<span class="title">Component</span></span>&#123;</div><div class="line">	constructor()&#123;</div><div class="line">		<span class="keyword">super</span>();</div><div class="line">		<span class="keyword">this</span>.state = &#123;</div><div class="line">			value: <span class="symbol">'Hello</span> <span class="type">World</span>!'</div><div class="line">		&#125;;</div><div class="line">	&#125;</div><div class="line">	handleChange(even)&#123;</div><div class="line">		<span class="keyword">this</span>.setState(&#123;</div><div class="line">			value: even.target.value</div><div class="line">		&#125;)</div><div class="line">	&#125;</div><div class="line">	render()&#123;</div><div class="line">		let value = <span class="keyword">this</span>.state.value;</div><div class="line">		<span class="keyword">return</span>(</div><div class="line">			&lt;div&gt;</div><div class="line">				&lt;input <span class="class"><span class="keyword">type</span></span>=<span class="symbol">'tex</span>t' value=&#123;value&#125; onChange=&#123;<span class="keyword">this</span>.handleChange.bind(<span class="keyword">this</span>)&#125; /&gt;</div><div class="line">				&lt;h4&gt;&#123;value&#125;&lt;/h4&gt;</div><div class="line">			&lt;/div&gt;</div><div class="line">		);</div><div class="line">	&#125;</div><div class="line">&#125;</div><div class="line"><span class="type">ReactDOM</span>.render(&lt;<span class="type">HelloMessage</span> /&gt;,mountNode);</div></pre></td></tr></table></figure>
<h4 id="实例：输入文字实时显示-2"><a href="#实例：输入文字实时显示-2" class="headerlink" title="实例：输入文字实时显示"></a>实例：输入文字实时显示</h4><p>你需要在父组件通过创建事件句柄 (handleChange) ，并作为 prop (updateStateProp) 传递到你的子组件上。<br><figure class="highlight scala"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div></pre></td><td class="code"><pre><div class="line"><span class="class"><span class="keyword">class</span> <span class="title">Content</span> <span class="keyword">extends</span> <span class="title">React</span>.<span class="title">Component</span></span>&#123;</div><div class="line">	render()&#123;</div><div class="line">		<span class="keyword">return</span>(</div><div class="line">			&lt;div&gt;</div><div class="line">				&lt;input <span class="class"><span class="keyword">type</span></span>=<span class="symbol">'tex</span>t' value=&#123;<span class="keyword">this</span>.props.myDataProp&#125; onChange=&#123;<span class="keyword">this</span>.props.updataStateProp&#125; /&gt;</div><div class="line">				&lt;h4&gt;&#123;<span class="keyword">this</span>.props.myDataProp&#125;&lt;/h4&gt;</div><div class="line">			&lt;/div&gt;</div><div class="line">		)</div><div class="line">	&#125;</div><div class="line">&#125;</div><div class="line"><span class="class"><span class="keyword">class</span> <span class="title">HelloMessage</span> <span class="keyword">extends</span> <span class="title">React</span>.<span class="title">Component</span></span>&#123;</div><div class="line">	constructor()&#123;</div><div class="line">		<span class="keyword">super</span>();</div><div class="line">		<span class="keyword">this</span>.state = &#123;</div><div class="line">			value: <span class="symbol">'Hello</span> <span class="type">World</span>!'</div><div class="line">		&#125;;</div><div class="line">	&#125;</div><div class="line">	handleChange(even)&#123;</div><div class="line">		<span class="keyword">this</span>.setState(&#123;</div><div class="line">			value: even.target.value</div><div class="line">		&#125;)</div><div class="line">	&#125;</div><div class="line">	render()&#123;</div><div class="line">		let value = <span class="keyword">this</span>.state.value;</div><div class="line">		<span class="keyword">return</span>(</div><div class="line">			&lt;div&gt;</div><div class="line">				&lt;<span class="type">Content</span> myDataProp=&#123;value&#125; updataStateProp=&#123;<span class="keyword">this</span>.handleChange.bind(<span class="keyword">this</span>)&#125; /&gt;</div><div class="line">			&lt;/div&gt;</div><div class="line">		);</div><div class="line">	&#125;</div><div class="line">&#125;</div><div class="line"><span class="type">ReactDOM</span>.render(&lt;<span class="type">HelloMessage</span> /&gt;,mountNode);</div></pre></td></tr></table></figure></p>
<h4 id="实例：点我"><a href="#实例：点我" class="headerlink" title="实例：点我"></a>实例：点我</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div></pre></td><td class="code"><pre><div class="line"><span class="class"><span class="keyword">class</span> <span class="title">HelloMessage</span> <span class="keyword">extends</span> <span class="title">React</span>.<span class="title">Component</span></span>&#123;</div><div class="line">	<span class="keyword">constructor</span>()&#123;</div><div class="line">		<span class="keyword">super</span>();</div><div class="line">		<span class="keyword">this</span>.state=&#123;</div><div class="line">			<span class="attr">value</span>: <span class="string">'Hello World!'</span></div><div class="line">		&#125;</div><div class="line">	&#125;</div><div class="line">	handleChange(event)&#123;</div><div class="line">		<span class="keyword">this</span>.setState(&#123;</div><div class="line">			<span class="attr">value</span>: <span class="string">'Jimmey-Jiang is good man!'</span></div><div class="line">		&#125;)</div><div class="line">	&#125;</div><div class="line">	render()&#123;</div><div class="line">		<span class="keyword">let</span> value = <span class="keyword">this</span>.state.value;</div><div class="line">		<span class="keyword">return</span>(</div><div class="line">			<span class="xml"><span class="tag">&lt;<span class="name">div</span>&gt;</span></span></div><div class="line">				<span class="tag">&lt;<span class="name">button</span> <span class="attr">onClick</span>=<span class="string">&#123;this.handleChange.bind(this)&#125;</span>&gt;</span>点我<span class="tag">&lt;/<span class="name">button</span>&gt;</span></div><div class="line">				<span class="tag">&lt;<span class="name">h4</span>&gt;</span>&#123;value&#125;<span class="tag">&lt;/<span class="name">h4</span>&gt;</span></div><div class="line">			<span class="tag">&lt;/<span class="name">div</span>&gt;</span></div><div class="line">		)</div><div class="line">	&#125;</div><div class="line">&#125;</div><div class="line">ReactDOM.render(<span class="xml"><span class="tag">&lt;<span class="name">HelloMessage</span> /&gt;</span>,mountNode);</span></div></pre></td></tr></table></figure>
<p>当你需要从子组件中更新父组件的 state 时，你需要在父组件通过创建事件句柄 (handleChange) ，并作为 prop (updateStateProp) 传递到你的子组件上。实例如下：</p>
<h4 id="实例：点我-1"><a href="#实例：点我-1" class="headerlink" title="实例：点我"></a>实例：点我</h4><figure class="highlight scala"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div></pre></td><td class="code"><pre><div class="line"><span class="class"><span class="keyword">class</span> <span class="title">Content</span> <span class="keyword">extends</span> <span class="title">React</span>.<span class="title">Component</span></span>&#123;</div><div class="line">	render()&#123;</div><div class="line">		<span class="keyword">return</span>(</div><div class="line">			&lt;div&gt;</div><div class="line">				&lt;button onClick=&#123;<span class="keyword">this</span>.props.updateStateProp&#125;&gt;点我&lt;/button&gt;</div><div class="line">				&lt;h4&gt;&#123;<span class="keyword">this</span>.props.myDataProp&#125;&lt;/h4&gt;</div><div class="line">			&lt;/div&gt;</div><div class="line">		)</div><div class="line">	&#125;</div><div class="line">&#125;</div><div class="line"><span class="class"><span class="keyword">class</span> <span class="title">HelloMessage</span> <span class="keyword">extends</span> <span class="title">React</span>.<span class="title">Component</span></span>&#123;</div><div class="line">	constructor()&#123;</div><div class="line">		<span class="keyword">super</span>();</div><div class="line">		<span class="keyword">this</span>.state = &#123;</div><div class="line">			value: <span class="symbol">'Hello</span> <span class="type">World</span>!'</div><div class="line">		&#125;</div><div class="line">	&#125;</div><div class="line">	handleChange(event)&#123;</div><div class="line">		<span class="keyword">this</span>.setState(&#123;</div><div class="line">			value: <span class="symbol">'Jimmey-Jiang</span> is good man!'</div><div class="line">		&#125;)</div><div class="line">	&#125;</div><div class="line">	render()&#123;</div><div class="line">		let value = <span class="keyword">this</span>.state.value;</div><div class="line">		<span class="keyword">return</span> &lt;div&gt;&lt;<span class="type">Content</span> myDataProp=&#123;value&#125; updateStateProp=&#123;<span class="keyword">this</span>.handleChange.bind(<span class="keyword">this</span>)&#125;&gt;&lt;/<span class="type">Content</span>&gt;&lt;/div&gt;</div><div class="line">	&#125;</div><div class="line">&#125;</div><div class="line"><span class="type">ReactDOM</span>.render(&lt;<span class="type">HelloMessage</span> /&gt;,mountNode);</div></pre></td></tr></table></figure>
<h2 id="Refs-and-the-DOM"><a href="#Refs-and-the-DOM" class="headerlink" title="Refs and the DOM"></a>Refs and the DOM</h2><h3 id="React-Refs"><a href="#React-Refs" class="headerlink" title="React Refs"></a>React Refs</h3><p>React 支持一种非常特殊的属性 Ref ，你可以用来绑定到 render() 输出的任何组件上。<br>这个特殊的属性允许你引用 render() 返回的相应的支撑实例（ backing instance ）。这样就可以确保在任何时间总是拿到正确的实例。</p>
<blockquote>
<p>使用方法：<br>绑定一个 ref 属性到 render 的返回值上：</p>
</blockquote>
<p>在其它代码中，通过 this.refs 获取支撑实例:<br><figure class="highlight verilog"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line">&lt;<span class="keyword">input</span> <span class="keyword">ref</span>=<span class="string">"myInput"</span> /&gt;</div><div class="line"></div><div class="line"><span class="keyword">var</span> <span class="keyword">input</span> = <span class="keyword">this</span><span class="variable">.refs</span><span class="variable">.myInput</span>;</div><div class="line"><span class="keyword">var</span> inputValue = <span class="keyword">input</span><span class="variable">.value</span>;</div><div class="line"><span class="keyword">var</span> inputRect = <span class="keyword">input</span><span class="variable">.getBoundingClientRect</span>();</div></pre></td></tr></table></figure></p>
<h4 id="实例：点我输入框获取焦点"><a href="#实例：点我输入框获取焦点" class="headerlink" title="实例：点我输入框获取焦点"></a>实例：点我输入框获取焦点</h4><figure class="highlight scala"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div></pre></td><td class="code"><pre><div class="line"><span class="class"><span class="keyword">class</span> <span class="title">MyComponent</span> <span class="keyword">extends</span> <span class="title">React</span>.<span class="title">Component</span></span>&#123;</div><div class="line">	handleClick()&#123;</div><div class="line">		<span class="keyword">this</span>.refs.myInput.focus();</div><div class="line">	&#125;</div><div class="line">	render()&#123;</div><div class="line">		<span class="keyword">return</span>(</div><div class="line">			&lt;div&gt;</div><div class="line">				&lt;input <span class="class"><span class="keyword">type</span></span>=<span class="symbol">'tex</span>t' ref=<span class="symbol">'myInpu</span>t' /&gt;</div><div class="line">				&lt;input <span class="class"><span class="keyword">type</span></span>=<span class="symbol">'butto</span>n' value='点我输入框获取焦点' onClick=&#123;<span class="keyword">this</span>.handleClick.bind(<span class="keyword">this</span>)&#125; /&gt;</div><div class="line">			&lt;/div&gt;</div><div class="line">		);</div><div class="line">	&#125;</div><div class="line">&#125;</div><div class="line"><span class="type">ReactDOM</span>.render(&lt;<span class="type">MyComponent</span> /&gt;,mountNode);</div></pre></td></tr></table></figure>
<p>当组件插入到 DOM 后，ref属性添加一个组件的引用于到this.refs.name获取。</p>
<p>实例中，我们获取了输入框的支撑实例的引用，子点击按钮后输入框获取焦点。<br>我们也可以使用 getDOMNode()方法获取DOM元素</p>
<h2 id="React-AJAX"><a href="#React-AJAX" class="headerlink" title="React AJAX"></a>React AJAX</h2><p>React 组件的数据可以通过 componentDidMount 方法中的 Ajax 来获取，当从服务端获取数据库可以将数据存储在 state 中，再用 this.setState 方法重新渲染 UI。<br>当使用异步加载数据时，在组件卸载前使用 componentWillUnmount 来取消未完成的请求。</p>
<h3 id="实例"><a href="#实例" class="headerlink" title="实例"></a>实例</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">$.get(URL,<span class="function"><span class="keyword">function</span>(<span class="params">data</span>)</span>&#123;&#125;)</div></pre></td></tr></table></figure>
<h4 id="实例：获取-Github-用户最新-gist-共享描述"><a href="#实例：获取-Github-用户最新-gist-共享描述" class="headerlink" title="实例：获取 Github 用户最新 gist 共享描述:"></a>实例：获取 Github 用户最新 gist 共享描述:</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div></pre></td><td class="code"><pre><div class="line"><span class="class"><span class="keyword">class</span> <span class="title">UserGist</span> <span class="keyword">extends</span> <span class="title">React</span>.<span class="title">Component</span></span>&#123;</div><div class="line">	<span class="keyword">constructor</span>() &#123;</div><div class="line">		<span class="keyword">super</span>();</div><div class="line">		<span class="keyword">this</span>.state = &#123;</div><div class="line">			<span class="attr">username</span>: <span class="string">''</span>,</div><div class="line">			<span class="attr">lastGistUrl</span>: <span class="string">''</span></div><div class="line">		&#125;</div><div class="line">	&#125;</div><div class="line">	componentDidMount()&#123;</div><div class="line">		<span class="keyword">this</span>.serverRequest = $.get(<span class="keyword">this</span>.props.source,<span class="function"><span class="keyword">function</span>(<span class="params">result</span>)</span>&#123;</div><div class="line">			<span class="keyword">let</span> lastGist = result[<span class="number">0</span>];</div><div class="line">			<span class="keyword">this</span>.setState(&#123;</div><div class="line">				<span class="attr">username</span>: lastGist.owner.login,</div><div class="line">				<span class="attr">lastGistUrl</span>: lastGist.html_url</div><div class="line">			&#125;)</div><div class="line">		&#125;.bind(<span class="keyword">this</span>))</div><div class="line">	&#125;</div><div class="line">	componentWillUnmount()&#123;</div><div class="line">		<span class="keyword">this</span>.serverRequest.abort();</div><div class="line">	&#125;</div><div class="line">	render()&#123;</div><div class="line">		<span class="keyword">return</span>(</div><div class="line">			<span class="xml"><span class="tag">&lt;<span class="name">div</span>&gt;</span></span></div><div class="line">				&#123;this.state.username&#125;</div><div class="line">				<span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&#123;this.state.lastGistUrl&#125;</span>&gt;</span>&#123;this.state.lastGistUrl&#125;<span class="tag">&lt;/<span class="name">a</span>&gt;</span></div><div class="line">			<span class="tag">&lt;/<span class="name">div</span>&gt;</span></div><div class="line">		)</div><div class="line">	&#125;</div><div class="line">&#125;</div><div class="line"></div><div class="line">ReactDOM.render(<span class="xml"><span class="tag">&lt;<span class="name">UserGist</span> <span class="attr">source</span>=<span class="string">"https://api.github.com/users/octocat/gists"</span> /&gt;</span>,mountNode);</span></div></pre></td></tr></table></figure>
<h4 id="实例：拉取数据"><a href="#实例：拉取数据" class="headerlink" title="实例：拉取数据"></a>实例：拉取数据</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div><div class="line">37</div><div class="line">38</div><div class="line">39</div><div class="line">40</div><div class="line">41</div><div class="line">42</div><div class="line">43</div><div class="line">44</div><div class="line">45</div><div class="line">46</div><div class="line">47</div><div class="line">48</div><div class="line">49</div><div class="line">50</div><div class="line">51</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">import</span> $ <span class="keyword">from</span> <span class="string">'jquery'</span>;</div><div class="line"><span class="keyword">import</span> React <span class="keyword">from</span> <span class="string">'react'</span>;</div><div class="line"><span class="keyword">import</span> ReactDOM <span class="keyword">from</span> <span class="string">'react-dom'</span>;</div><div class="line"><span class="keyword">const</span> mountNode = <span class="built_in">document</span>.getElementById(<span class="string">'root'</span>);</div><div class="line"></div><div class="line"><span class="class"><span class="keyword">class</span> <span class="title">RipoList</span> <span class="keyword">extends</span> <span class="title">React</span>.<span class="title">Component</span></span>&#123;</div><div class="line">    <span class="keyword">constructor</span>()&#123;</div><div class="line">        <span class="keyword">super</span>();</div><div class="line">        <span class="keyword">this</span>.state = &#123;</div><div class="line">            <span class="attr">loading</span>: <span class="literal">true</span>,</div><div class="line">            <span class="attr">error</span>: <span class="literal">null</span>,</div><div class="line">            <span class="attr">data</span>: <span class="literal">null</span></div><div class="line">        &#125;;</div><div class="line">    &#125;</div><div class="line">    componentDidMount()&#123;</div><div class="line">        <span class="keyword">this</span>.props.promise.then(</div><div class="line">            <span class="function"><span class="params">value</span> =&gt;</span> <span class="keyword">this</span>.setState(&#123;</div><div class="line">                <span class="attr">loading</span>: <span class="literal">false</span>,</div><div class="line">                <span class="attr">data</span>: value</div><div class="line">            &#125;),</div><div class="line">            error =&gt; <span class="keyword">this</span>.setState(&#123;</div><div class="line">                <span class="attr">loading</span>: <span class="literal">false</span>,</div><div class="line">                <span class="attr">error</span>: error</div><div class="line">            &#125;)</div><div class="line">        );</div><div class="line">    &#125;</div><div class="line">    render()&#123;</div><div class="line">        <span class="keyword">if</span>(<span class="keyword">this</span>.state.loading)&#123;</div><div class="line">            <span class="keyword">return</span> <span class="xml"><span class="tag">&lt;<span class="name">span</span>&gt;</span>Loading...<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span>;</div><div class="line">        &#125;<span class="keyword">else</span> <span class="keyword">if</span>(<span class="keyword">this</span>.state.error != <span class="literal">null</span>)&#123;</div><div class="line">            <span class="keyword">return</span>  <span class="xml"><span class="tag">&lt;<span class="name">span</span>&gt;</span>Error: &#123;this.state.error.message&#125;<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span>;</div><div class="line">        &#125;<span class="keyword">else</span>&#123;</div><div class="line">            <span class="keyword">let</span> repos = <span class="keyword">this</span>.state.data.items;</div><div class="line">            <span class="keyword">let</span> repoList = repos.map(<span class="function"><span class="keyword">function</span>(<span class="params">repo,index</span>)</span>&#123;</div><div class="line">                <span class="keyword">return</span>(</div><div class="line">                    <span class="xml"><span class="tag">&lt;<span class="name">li</span> <span class="attr">key</span>=<span class="string">&#123;index&#125;</span>&gt;</span></span></div><div class="line">                        <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&#123;repo.html_url&#125;</span>&gt;</span>&#123;repo.name&#125;<span class="tag">&lt;/<span class="name">a</span>&gt;</span>(&#123;repo.stargazers_count&#125; stars)<span class="tag">&lt;<span class="name">br</span> /&gt;</span></div><div class="line">                        &#123;repo.description&#125;</div><div class="line">                    <span class="tag">&lt;/<span class="name">li</span>&gt;</span>   </div><div class="line">                );</div><div class="line">            &#125;);</div><div class="line">            <span class="keyword">return</span>(</div><div class="line">                <span class="xml"><span class="tag">&lt;<span class="name">main</span>&gt;</span></span></div><div class="line">                    <span class="tag">&lt;<span class="name">h1</span>&gt;</span>Most Popular JavaScript Projects in Github<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></div><div class="line">                    <span class="tag">&lt;<span class="name">ol</span>&gt;</span>&#123;repoList&#125;<span class="tag">&lt;/<span class="name">ol</span>&gt;</span></div><div class="line">                <span class="tag">&lt;/<span class="name">main</span>&gt;</span></div><div class="line">            )</div><div class="line">        &#125;</div><div class="line">    &#125;</div><div class="line">&#125;</div><div class="line">ReactDOM.render(<span class="xml"><span class="tag">&lt;<span class="name">RipoList</span> <span class="attr">promise</span>=<span class="string">&#123;$.getJSON(</span>'<span class="attr">https:</span>//<span class="attr">api.github.com</span>/<span class="attr">search</span>/<span class="attr">repositories</span>?<span class="attr">q</span>=<span class="string">javascript&amp;sort</span>=<span class="string">stars</span>')&#125; /&gt;</span>,mountNode);</span></div></pre></td></tr></table></figure>
<h2 id="Add-Ons-添加插件"><a href="#Add-Ons-添加插件" class="headerlink" title="Add-Ons 添加插件"></a>Add-Ons 添加插件</h2><h3 id="jquery"><a href="#jquery" class="headerlink" title="jquery"></a>jquery</h3><figure class="highlight scala"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">import</span> $ from <span class="symbol">'jquer</span>y';</div><div class="line"><span class="keyword">import</span> <span class="type">React</span> from <span class="symbol">'reac</span>t';</div><div class="line"><span class="keyword">import</span> <span class="type">ReactDOM</span> from <span class="symbol">'react</span>-dom';</div><div class="line"></div><div class="line"><span class="class"><span class="keyword">class</span> <span class="title">HelloWorld</span> <span class="keyword">extends</span> <span class="title">React</span>.<span class="title">Component</span></span>&#123;</div><div class="line">	render()&#123;</div><div class="line">		<span class="keyword">return</span>(</div><div class="line">			&lt;div&gt;<span class="type">HelloWorld</span>&lt;/div&gt;</div><div class="line">		);</div><div class="line">	&#125;</div><div class="line">&#125;</div><div class="line"></div><div class="line"><span class="type">ReactDOM</span>.render(&lt;<span class="type">HelloWorld</span> /&gt;,$('#example')[<span class="number">0</span>]);</div></pre></td></tr></table></figure>
<h3 id="recharts"><a href="#recharts" class="headerlink" title="recharts"></a>recharts</h3><ul>
<li><a href="http://recharts.org/" target="_blank" rel="external">React图表组件库</a></li>
</ul>
<h3 id="bootstrap"><a href="#bootstrap" class="headerlink" title="bootstrap"></a>bootstrap</h3><ul>
<li><a href="https://react-bootstrap.github.io/" target="_blank" rel="external">React组件库</a></li>
</ul>
<h3 id="MarkdownEditor"><a href="#MarkdownEditor" class="headerlink" title="MarkdownEditor"></a>MarkdownEditor</h3><ul>
<li><a href="https://github.com/jonschlinkert/remarkable" title="Markdown解析器" target="_blank" rel="external">MarkDown</a></li>
</ul>
<h2 id="ReactDOM"><a href="#ReactDOM" class="headerlink" title="ReactDOM"></a>ReactDOM</h2><h3 id="render-2"><a href="#render-2" class="headerlink" title="render()"></a>render()</h3><figure class="highlight autohotkey"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line">ReactDOM.render(</div><div class="line"><span class="built_in">	element,</span></div><div class="line"><span class="built_in">	container,</span></div><div class="line">	[callback]</div><div class="line">)</div></pre></td></tr></table></figure>
<h3 id="unmountComponentAtNode"><a href="#unmountComponentAtNode" class="headerlink" title="unmountComponentAtNode()"></a>unmountComponentAtNode()</h3><figure class="highlight axapta"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">ReactDOM.unmountComponentAtNode(<span class="keyword">container</span>)</div></pre></td></tr></table></figure>
<h3 id="findDOMNode"><a href="#findDOMNode" class="headerlink" title="findDOMNode()"></a>findDOMNode()</h3><figure class="highlight css"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line"><span class="selector-tag">ReactDOM</span><span class="selector-class">.findDOMNode</span>(<span class="selector-tag">component</span>)</div></pre></td></tr></table></figure>
<p>### </p>
<h4 id="onkeypress"><a href="#onkeypress" class="headerlink" title="onkeypress"></a>onkeypress</h4><p>/<em> 在实例中，我们使用了支持多浏览器的方法，因为 keyCode 属性无法再 Firefox 浏览器中工作。但是 which 属性可以。<br>如果浏览器支持 event.which 则使用 event.which，否则使用 event.keyCode </em>/</p>
<h2 id="ES6"><a href="#ES6" class="headerlink" title="ES6"></a>ES6</h2><p><a href="http://es6.ruanyifeng.com/" title="阮一峰" target="_blank" rel="external">ECMAScript 6 入门</a></p>
<h3 id="let"><a href="#let" class="headerlink" title="let"></a>let</h3><p>用来声明变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效。</p>
<blockquote>
<p>for循环的计数器</p>
</blockquote>
<figure class="highlight maxima"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">for</span> (<span class="built_in">let</span> i = <span class="number">0</span>; i &lt; <span class="number">10</span>; i++) &#123;&#125;</div><div class="line"></div><div class="line">console.<span class="built_in">log</span>(i);</div><div class="line">//ReferenceError: i <span class="built_in">is</span> <span class="keyword">not</span> defined</div></pre></td></tr></table></figure>
<blockquote>
<p>下面的代码如果使用var，最后输出的是10</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> a = [];</div><div class="line"><span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>; i &lt; <span class="number">10</span>; i++) &#123;</div><div class="line">  a[i] = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</div><div class="line">    <span class="built_in">console</span>.log(i);</div><div class="line">  &#125;;</div><div class="line">&#125;</div><div class="line">a[<span class="number">6</span>](); <span class="comment">// 10</span></div></pre></td></tr></table></figure>
<blockquote>
<p>如果使用let，声明的变量仅在块级作用域内有效，最后输出的是6</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> a = [];</div><div class="line"><span class="keyword">for</span> (<span class="keyword">let</span> i = <span class="number">0</span>; i &lt; <span class="number">10</span>; i++) &#123;</div><div class="line">  a[i] = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</div><div class="line">    <span class="built_in">console</span>.log(i);</div><div class="line">  &#125;;</div><div class="line">&#125;</div><div class="line">a[<span class="number">6</span>](); <span class="comment">// 6</span></div></pre></td></tr></table></figure>
      
      
        <div class="page-reward">
          <p><a href="javascript:void(0)" onclick="dashangToggle()" class="dashang">赏</a></p>
          <div class="hide_box"></div>
          <div class="shang_box">
            <a class="shang_close" href="javascript:void(0)" onclick="dashangToggle()">×</a>
            <div class="shang_tit">
              <p>纯属好玩</p>
            </div>
            <div class="shang_payimg">
              <img src="/img/alipayimg.jpg" alt="扫码支持" title="扫一扫" />
            </div>
              <div class="pay_explain">扫码打赏，你说多少就多少</div>
            <div class="shang_payselect">
              
                <div class="pay_item checked" data-id="alipay">
                  <span class="radiobox"></span>
                  <span class="pay_logo"><img src="/img/alipay.png" alt="支付宝" /></span>
                </div>
              
              
                <div class="pay_item" data-id="wechat">
                  <span class="radiobox"></span>
                  <span class="pay_logo"><img src="/img/weixin.png" alt="微信" /></span>
                </div>
              
            </div>
            <div class="shang_info">
              <p>打开<span id="shang_pay_txt">支付宝</span>扫一扫，即可进行扫码打赏哦</p>
            </div>
          </div>
        </div>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/zepto/1.2.0/zepto.min.js"></script>
        <script type="text/javascript">
          $(".pay_item").click(function(){
            $(this).addClass('checked').siblings('.pay_item').removeClass('checked');
            var dataid=$(this).attr('data-id');
            $(".shang_payimg img").attr("src","/img/"+dataid+"img.jpg");
            $("#shang_pay_txt").text(dataid=="alipay"?"支付宝":"微信");
          });
          function dashangToggle(){
            window._hmt.push(['_trackEvent', 'pay', 'click', '赏'])
            $(".hide_box").fadeToggle();
            $(".shang_box").fadeToggle();
          }
        </script>
      
    </div>
    
  </div>
  
    
    <div class="copyright">
        <p><span>本文标题:</span><a href="/2017/02/14/FrontFrame/React/React/">React初探</a></p>
        <p><span>文章作者:</span><a href="/" title="访问 安与生 的个人博客">安与生</a></p>
        <p><span>发布时间:</span>2017年02月14日 - 18时29分</p>
        <p><span>最后更新:</span>2017年07月28日 - 18时54分</p>
        <p>
            <span>原始链接:</span><a class="post-url" href="/2017/02/14/FrontFrame/React/React/" title="React初探">http://Jimmey-Jiang.github.io/2017/02/14/FrontFrame/React/React/</a>
            <span class="copy-path" data-clipboard-text="原文: http://Jimmey-Jiang.github.io/2017/02/14/FrontFrame/React/React/　　作者: 安与生" title="点击复制文章链接"><i class="fa fa-clipboard"></i></span>
            <script src="/js/clipboard.min.js"></script>
            <script> var clipboard = new Clipboard('.copy-path'); </script>
        </p>
        <p>
            <span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/3.0/cn/" title="中国大陆 (CC BY-NC-SA 3.0 CN)" target = "_blank">"署名-非商用-相同方式共享 3.0"</a> 转载请保留原文链接及作者。
        </p>
    </div>



<nav id="article-nav">
  
    <a href="/2017/03/21/Tool/Sublime/sublimeMac/" id="article-nav-newer" class="article-nav-link-wrap">
      <strong class="article-nav-caption"><</strong>
      <div class="article-nav-title">
        
          Sublime Mac 快捷键
        
      </div>
    </a>
  
  
    <a href="/2017/01/02/Induce/CSS/CSSElementAlign/" id="article-nav-older" class="article-nav-link-wrap">
      <div class="article-nav-title">用CSS实现元素垂直居中方案</div>
      <strong class="article-nav-caption">></strong>
    </a>
  
</nav>

  
</article>

    <div id="toc" class="toc-article">
    <strong class="toc-title">文章目录</strong>
    <ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#概况"><span class="toc-number">1.</span> <span class="toc-text">概况</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#React-特点"><span class="toc-number">1.1.</span> <span class="toc-text">React 特点</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#简单Demo"><span class="toc-number">2.</span> <span class="toc-text">简单Demo</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#引入依赖"><span class="toc-number">2.1.</span> <span class="toc-text">引入依赖</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#React代码"><span class="toc-number">2.2.</span> <span class="toc-text">React代码</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#React-JSX语法"><span class="toc-number">3.</span> <span class="toc-text">React JSX语法</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#简单嵌套元素"><span class="toc-number">3.1.</span> <span class="toc-text">简单嵌套元素</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#实例：Hello-world"><span class="toc-number">3.1.1.</span> <span class="toc-text">实例：Hello, world!</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#复杂嵌套元素"><span class="toc-number">3.2.</span> <span class="toc-text">复杂嵌套元素</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#实例：文字"><span class="toc-number">3.2.1.</span> <span class="toc-text">实例：文字</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#JavaScript-表达式"><span class="toc-number">3.3.</span> <span class="toc-text">JavaScript 表达式</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#实例：计算"><span class="toc-number">3.3.1.</span> <span class="toc-text">实例：计算</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#实例：判断"><span class="toc-number">3.3.2.</span> <span class="toc-text">实例：判断</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#样式"><span class="toc-number">3.4.</span> <span class="toc-text">样式</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#实例：CSS样式"><span class="toc-number">3.4.1.</span> <span class="toc-text">实例：CSS样式</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#注释"><span class="toc-number">3.5.</span> <span class="toc-text">注释</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#实例：注释"><span class="toc-number">3.6.</span> <span class="toc-text">实例：注释</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#React-Component组件"><span class="toc-number">4.</span> <span class="toc-text">React.Component组件</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#基础语法"><span class="toc-number">4.1.</span> <span class="toc-text">基础语法</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#HTML-标签-vs-React-组件"><span class="toc-number">4.2.</span> <span class="toc-text">HTML 标签 vs. React 组件</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#实例：创建组件"><span class="toc-number">4.2.1.</span> <span class="toc-text">实例：创建组件</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#实例：组件嵌套"><span class="toc-number">4.2.2.</span> <span class="toc-text">实例：组件嵌套</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#实例：组件语法"><span class="toc-number">4.2.3.</span> <span class="toc-text">实例：组件语法</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#实例：获取父元素的值"><span class="toc-number">4.2.4.</span> <span class="toc-text">实例：获取父元素的值</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#复合组件"><span class="toc-number">4.3.</span> <span class="toc-text">复合组件</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#实例：链接"><span class="toc-number">4.3.1.</span> <span class="toc-text">实例：链接</span></a></li></ol></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#React-State-状态"><span class="toc-number">5.</span> <span class="toc-text">React State(状态)</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#constructor-初始状态"><span class="toc-number">5.1.</span> <span class="toc-text">constructor()初始状态</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#实例：点击喜欢-amp-不喜欢"><span class="toc-number">5.1.1.</span> <span class="toc-text">实例：点击喜欢&不喜欢</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#实例：输入文字实时显示"><span class="toc-number">5.1.2.</span> <span class="toc-text">实例：输入文字实时显示</span></a></li></ol></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#React-Props"><span class="toc-number">6.</span> <span class="toc-text">React Props</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#基础语法-1"><span class="toc-number">6.1.</span> <span class="toc-text">基础语法</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#实例：数据传递"><span class="toc-number">6.1.1.</span> <span class="toc-text">实例：数据传递</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#defaultProps默认值"><span class="toc-number">6.2.</span> <span class="toc-text">defaultProps默认值</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#this-props-children"><span class="toc-number">6.3.</span> <span class="toc-text">this.props.children</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#实例：点击次数"><span class="toc-number">6.3.1.</span> <span class="toc-text">实例：点击次数</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#PropTypes验证"><span class="toc-number">6.4.</span> <span class="toc-text">PropTypes验证</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#实例：判断组件属性title是否为字符串："><span class="toc-number">6.4.1.</span> <span class="toc-text">实例：判断组件属性title是否为字符串：</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#PropTypes属性值"><span class="toc-number">6.5.</span> <span class="toc-text">PropTypes属性值</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#state和props区别"><span class="toc-number">6.6.</span> <span class="toc-text">state和props区别</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#实例：链接-1"><span class="toc-number">6.6.1.</span> <span class="toc-text">实例：链接</span></a></li></ol></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#React-组件-API"><span class="toc-number">7.</span> <span class="toc-text">React 组件 API</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#基础语法-2"><span class="toc-number">7.1.</span> <span class="toc-text">基础语法</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#mixins去重"><span class="toc-number">7.2.</span> <span class="toc-text">mixins去重</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#实例：点击次数-1"><span class="toc-number">7.2.1.</span> <span class="toc-text">实例：点击次数</span></a></li></ol></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#React-组件生命周期"><span class="toc-number">8.</span> <span class="toc-text">React 组件生命周期</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#Mounting：已插入真实-DOM"><span class="toc-number">8.1.</span> <span class="toc-text">Mounting：已插入真实 DOM</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#constructor-NaN"><span class="toc-number">8.1.1.</span> <span class="toc-text">constructor()</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#componentWillMount"><span class="toc-number">8.1.2.</span> <span class="toc-text">componentWillMount()</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#render"><span class="toc-number">8.1.3.</span> <span class="toc-text">render()</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#componentDidMount"><span class="toc-number">8.1.4.</span> <span class="toc-text">componentDidMount()</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Updating：正在被重新渲染"><span class="toc-number">8.2.</span> <span class="toc-text">Updating：正在被重新渲染</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#componentWillReceiveProps"><span class="toc-number">8.2.1.</span> <span class="toc-text">componentWillReceiveProps()</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#shouldComponentUpdate"><span class="toc-number">8.2.2.</span> <span class="toc-text">shouldComponentUpdate()</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#componentWillUpdate"><span class="toc-number">8.2.3.</span> <span class="toc-text">componentWillUpdate()</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#render-1"><span class="toc-number">8.2.4.</span> <span class="toc-text">render()</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#componentDidUpdate"><span class="toc-number">8.2.5.</span> <span class="toc-text">componentDidUpdate()</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Unmounting：已移出真实-DOM"><span class="toc-number">8.3.</span> <span class="toc-text">Unmounting：已移出真实 DOM</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#componentWillUnmount"><span class="toc-number">8.3.1.</span> <span class="toc-text">componentWillUnmount()</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#实例：定时器，每隔100毫秒重新设置组件的透明度，并重新渲染"><span class="toc-number">8.3.2.</span> <span class="toc-text">实例：定时器，每隔100毫秒重新设置组件的透明度，并重新渲染</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#实例：点击效果"><span class="toc-number">8.3.3.</span> <span class="toc-text">实例：点击效果</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#实例：统计时间"><span class="toc-number">8.3.4.</span> <span class="toc-text">实例：统计时间</span></a></li></ol></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Lists-and-Keys列表遍历"><span class="toc-number">9.</span> <span class="toc-text">Lists and Keys列表遍历</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#Array-map"><span class="toc-number">9.1.</span> <span class="toc-text">Array.map</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Array-forEach-遍历"><span class="toc-number">9.2.</span> <span class="toc-text">Array.forEach 遍历</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Array-splice-删除"><span class="toc-number">9.3.</span> <span class="toc-text">Array.splice 删除</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Array-filter"><span class="toc-number">9.4.</span> <span class="toc-text">Array.filter</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Array-every"><span class="toc-number">9.5.</span> <span class="toc-text">Array.every</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Array-push"><span class="toc-number">9.6.</span> <span class="toc-text">Array.push</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Handling-Events绑定事件"><span class="toc-number">10.</span> <span class="toc-text">Handling Events绑定事件</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Forms表单"><span class="toc-number">11.</span> <span class="toc-text">Forms表单</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#基础语法-3"><span class="toc-number">11.1.</span> <span class="toc-text">基础语法</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#实例：输入文字实时显示-1"><span class="toc-number">11.1.1.</span> <span class="toc-text">实例：输入文字实时显示</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#实例：输入文字实时显示-2"><span class="toc-number">11.1.2.</span> <span class="toc-text">实例：输入文字实时显示</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#实例：点我"><span class="toc-number">11.1.3.</span> <span class="toc-text">实例：点我</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#实例：点我-1"><span class="toc-number">11.1.4.</span> <span class="toc-text">实例：点我</span></a></li></ol></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Refs-and-the-DOM"><span class="toc-number">12.</span> <span class="toc-text">Refs and the DOM</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#React-Refs"><span class="toc-number">12.1.</span> <span class="toc-text">React Refs</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#实例：点我输入框获取焦点"><span class="toc-number">12.1.1.</span> <span class="toc-text">实例：点我输入框获取焦点</span></a></li></ol></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#React-AJAX"><span class="toc-number">13.</span> <span class="toc-text">React AJAX</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#实例"><span class="toc-number">13.1.</span> <span class="toc-text">实例</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#实例：获取-Github-用户最新-gist-共享描述"><span class="toc-number">13.1.1.</span> <span class="toc-text">实例：获取 Github 用户最新 gist 共享描述:</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#实例：拉取数据"><span class="toc-number">13.1.2.</span> <span class="toc-text">实例：拉取数据</span></a></li></ol></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Add-Ons-添加插件"><span class="toc-number">14.</span> <span class="toc-text">Add-Ons 添加插件</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#jquery"><span class="toc-number">14.1.</span> <span class="toc-text">jquery</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#recharts"><span class="toc-number">14.2.</span> <span class="toc-text">recharts</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#bootstrap"><span class="toc-number">14.3.</span> <span class="toc-text">bootstrap</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#MarkdownEditor"><span class="toc-number">14.4.</span> <span class="toc-text">MarkdownEditor</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#ReactDOM"><span class="toc-number">15.</span> <span class="toc-text">ReactDOM</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#render-2"><span class="toc-number">15.1.</span> <span class="toc-text">render()</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#unmountComponentAtNode"><span class="toc-number">15.2.</span> <span class="toc-text">unmountComponentAtNode()</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#findDOMNode"><span class="toc-number">15.3.</span> <span class="toc-text">findDOMNode()</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#onkeypress"><span class="toc-number">15.3.1.</span> <span class="toc-text">onkeypress</span></a></li></ol></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#ES6"><span class="toc-number">16.</span> <span class="toc-text">ES6</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#let"><span class="toc-number">16.1.</span> <span class="toc-text">let</span></a></li></ol></li></ol>
</div>
<input type="button" id="tocButton" value="隐藏目录"  title="点击按钮隐藏或者显示文章目录">

<script src="https://7.url.cn/edu/jslib/comb/require-2.1.6,jquery-1.9.1.min.js"></script>
<script>
    var valueHide = "隐藏目录";
    var valueShow = "显示目录";

    if ($(".left-col").is(":hidden")) {
        $("#tocButton").attr("value", valueShow);
    }
    $("#tocButton").click(function() {
        if ($("#toc").is(":hidden")) {
            $("#tocButton").attr("value", valueHide);
            $("#toc").slideDown(320);
        }
        else {
            $("#tocButton").attr("value", valueShow);
            $("#toc").slideUp(350);
        }
    })
    if ($(".toc").length < 1) {
        $("#toc, #tocButton").hide();
    }
</script>





<div class="bdsharebuttonbox">
	<a href="#" class="fx fa-weibo bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a>
	<a href="#" class="fx fa-weixin bds_weixin" data-cmd="weixin" title="分享到微信"></a>
	<a href="#" class="fx fa-qq bds_sqq" data-cmd="sqq" title="分享到QQ好友"></a>
	<a href="#" class="fx fa-facebook-official bds_fbook" data-cmd="fbook" title="分享到Facebook"></a>
	<a href="#" class="fx fa-twitter bds_twi" data-cmd="twi" title="分享到Twitter"></a>
	<a href="#" class="fx fa-linkedin bds_linkedin" data-cmd="linkedin" title="分享到linkedin"></a>
	<a href="#" class="fx fa-files-o bds_copy" data-cmd="copy" title="分享到复制网址"></a>
</div>
<script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"2","bdSize":"24"},"share":{}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];</script>




    
        <div id="gitments"></div>
<script src="/js/gitment.browser.js"></script>
<script>
    var gitment = new Gitment({
      id: window.location.pathname,
      owner: 'Jimmey-Jiang',
      repo: 'Jimmey-Jiang.github.io',
      oauth: {
        client_id: '7f50019c6a02c37e7aca',
        client_secret: 'd583910e6ae1492b375796d2c82efcda2cc67aae',
      },
    })
    gitment.render('gitments')
</script>
    



    <div class="scroll" id="post-nav-button">
        
            <a href="/2017/03/21/Tool/Sublime/sublimeMac/" title="上一篇: Sublime Mac 快捷键">
                <i class="fa fa-angle-left"></i>
            </a>
        
        <a title="文章列表"><i class="fa fa-bars"></i><i class="fa fa-times"></i></a>
        
            <a href="/2017/01/02/Induce/CSS/CSSElementAlign/" title="下一篇: 用CSS实现元素垂直居中方案">
                <i class="fa fa-angle-right"></i>
            </a>
        
    </div>
    <ul class="post-list"><li class="post-list-item"><a class="post-list-link" href="/2017/08/29/Tool/GitWorkflows/">Git Workflows</a></li><li class="post-list-item"><a class="post-list-link" href="/2017/08/19/Tool/Git/">Git速查手册</a></li><li class="post-list-item"><a class="post-list-link" href="/2017/08/18/FrontFrame/Vue/VueComponents/">Vue组件探秘</a></li><li class="post-list-item"><a class="post-list-link" href="/2017/08/18/Induce/InduceSass/">深入Sass</a></li><li class="post-list-item"><a class="post-list-link" href="/2017/08/18/FrontFrame/Vue/KeepAlive/">keep-alive最佳实践</a></li><li class="post-list-item"><a class="post-list-link" href="/2017/08/18/Induce/CSS/CssLowFrequency/">CSS低频属性</a></li><li class="post-list-item"><a class="post-list-link" href="/2017/08/02/Tool/Terminal/">Terminal配置</a></li><li class="post-list-item"><a class="post-list-link" href="/2017/07/25/Induce/Weixin/JS-SDK/">WeChat SDK</a></li><li class="post-list-item"><a class="post-list-link" href="/2017/07/12/Induce/Hack/Canvas/">浏览器常见Bug——Canvas</a></li><li class="post-list-item"><a class="post-list-link" href="/2017/04/25/FrontFrame/Vue/Vuex/">Vuex</a></li><li class="post-list-item"><a class="post-list-link" href="/2017/03/25/Induce/HTML/Video/">Mobile Video</a></li><li class="post-list-item"><a class="post-list-link" href="/2017/03/25/FrontFrame/Vue/VueRouter/">Vue Router</a></li><li class="post-list-item"><a class="post-list-link" href="/2017/03/21/Tool/Sublime/sublimeMac/">Sublime Mac 快捷键</a></li><li class="post-list-item"><a class="post-list-link" href="/2017/02/14/FrontFrame/React/React/">React初探</a></li><li class="post-list-item"><a class="post-list-link" href="/2017/01/02/Induce/CSS/CSSElementAlign/">用CSS实现元素垂直居中方案</a></li><li class="post-list-item"><a class="post-list-link" href="/2016/12/31/Skill/norm/normCSS/">CSS前端代码规范</a></li><li class="post-list-item"><a class="post-list-link" href="/2016/12/31/Skill/norm/normjs/">前端代码规范Javascript</a></li><li class="post-list-item"><a class="post-list-link" href="/2016/12/31/Skill/norm/normhtml/">HTML前端代码规范</a></li><li class="post-list-item"><a class="post-list-link" href="/2016/12/31/Skill/norm/normdev/">前端开发代码规范</a></li><li class="post-list-item"><a class="post-list-link" href="/2016/12/27/FrontFrame/ReactNative/Components/RNCText/">React Native Text</a></li><li class="post-list-item"><a class="post-list-link" href="/2016/12/27/FrontFrame/ReactNative/Components/RNCTextInput/">React Native TextInput</a></li><li class="post-list-item"><a class="post-list-link" href="/2016/12/27/FrontFrame/ReactNative/Components/RNCImage/">React Native Image</a></li><li class="post-list-item"><a class="post-list-link" href="/2016/12/27/FrontFrame/ReactNative/Components/RNComponents/">React Native 组件</a></li><li class="post-list-item"><a class="post-list-link" href="/2016/12/26/FrontFrame/ReactNative/RNTest/">React Native 实战封装组件</a></li><li class="post-list-item"><a class="post-list-link" href="/2016/12/26/FrontFrame/ReactNative/RNBasics/">React Native 基础</a></li><li class="post-list-item"><a class="post-list-link" href="/2016/12/25/FrontFrame/ReactNative/RNSetOX/">React Native IOS环境搭建</a></li><li class="post-list-item"><a class="post-list-link" href="/2016/12/25/FrontFrame/ReactNative/RNTools/">React Native开发工具</a></li><li class="post-list-item"><a class="post-list-link" href="/2016/12/25/FrontFrame/ReactNative/RNSetAndroid/">React Native Android环境搭建（Window）</a></li><li class="post-list-item"><a class="post-list-link" href="/2016/12/25/FrontFrame/ReactNative/RN/">React Native初探</a></li><li class="post-list-item"><a class="post-list-link" href="/2016/05/08/Induce/Mobile/MobileGuide/">移动Web解决方案</a></li><li class="post-list-item"><a class="post-list-link" href="/2016/04/02/Induce/JavaScript/JSInputSearch/">Input输入框的案例</a></li><li class="post-list-item"><a class="post-list-link" href="/2016/04/02/Plug/Gulp/InduceGulp/">Gulp前端构建工具</a></li><li class="post-list-item"><a class="post-list-link" href="/2016/04/02/Plug/Sublime/SublimeOmniMarkupPreviewer/">OmniMarkupPreviewer</a></li><li class="post-list-item"><a class="post-list-link" href="/2016/04/02/Induce/HTML/HtmlRem/">移动H5自适应布局</a></li><li class="post-list-item"><a class="post-list-link" href="/2016/03/02/Demo/TextShow/">BOOS信息展示与收缩</a></li><li class="post-list-item"><a class="post-list-link" href="/2016/02/28/Demo/MobileRotate/">移动端横屏提示动画</a></li><li class="post-list-item"><a class="post-list-link" href="/2016/02/27/Induce/Skill/OOCSS/">面向对象的CSS样式</a></li><li class="post-list-item"><a class="post-list-link" href="/2016/02/27/Induce/Mobile/MobliePC/">关于移动端界面在PC端显示的实现</a></li><li class="post-list-item"><a class="post-list-link" href="/2016/02/20/Induce/Node/NodeJsWeb/">Node.js实战 建立简单的Web服务器</a></li><li class="post-list-item"><a class="post-list-link" href="/2016/02/20/Induce/CSS/animation/">CSS3动画探秘</a></li><li class="post-list-item"><a class="post-list-link" href="/2016/01/28/Induce/Mobile/Mobile-knowledge/">移动前端知识总结</a></li><li class="post-list-item"><a class="post-list-link" href="/2016/01/27/Induce/Ajax/Ajax/">Ajax学习计划</a></li><li class="post-list-item"><a class="post-list-link" href="/2016/01/20/Plug/ChromePlug/">前端Chrome插件</a></li><li class="post-list-item"><a class="post-list-link" href="/2016/01/19/Induce/JavaScript/JSTip/">原生JS TitleTip</a></li><li class="post-list-item"><a class="post-list-link" href="/2016/01/19/Induce/Ajax/AjaxStatus/">Ajax Status请求状态</a></li><li class="post-list-item"><a class="post-list-link" href="/2016/01/16/Interview/FrontMap/">【转】2015-2016前端知识体系</a></li><li class="post-list-item"><a class="post-list-link" href="/2016/01/15/Induce/JavaScript/NativeJS/">原生JavaScript探索</a></li><li class="post-list-item"><a class="post-list-link" href="/2016/01/13/Induce/HTML/HTMLbase/">HTML结构零散</a></li><li class="post-list-item"><a class="post-list-link" href="/2015/12/27/Hexo/GitHubHexo/">使用GitHub搭建Hexo博客</a></li><li class="post-list-item"><a class="post-list-link" href="/2015/12/27/Hexo/HexoBug/">Hexo bug</a></li><li class="post-list-item"><a class="post-list-link" href="/2015/12/27/Hexo/HexoPlug/">Hexo插件安装</a></li><li class="post-list-item"><a class="post-list-link" href="/2015/12/27/Hexo/Hexo/">Hexo的使用介绍</a></li><li class="post-list-item"><a class="post-list-link" href="/2015/12/27/Hexo/HexoTheme/">Hexo 主题：SPFK</a></li><li class="post-list-item"><a class="post-list-link" href="/2015/12/26/Skill/win7Set/">电脑优化相关</a></li><li class="post-list-item"><a class="post-list-link" href="/2015/12/25/Induce/CSS/CssTips/">CSS小技巧收藏</a></li><li class="post-list-item"><a class="post-list-link" href="/2015/12/25/Interview/WebFront/">web前端职业规划</a></li><li class="post-list-item"><a class="post-list-link" href="/2015/12/25/Induce/HTML/media/">响应式布局</a></li><li class="post-list-item"><a class="post-list-link" href="/2015/12/25/Induce/CSS/CSS/">CSS学习计划</a></li><li class="post-list-item"><a class="post-list-link" href="/2015/12/24/Tool/Sublime/Sublimemarkdown/">Markdown使用指南</a></li><li class="post-list-item"><a class="post-list-link" href="/2015/12/21/Tool/Sublime/Sublimebest/">Sublime Text历练</a></li><li class="post-list-item"><a class="post-list-link" href="/2015/12/21/Induce/JavaScript/JQueryCDN/">CDN公共库</a></li><li class="post-list-item"><a class="post-list-link" href="/2015/12/21/Plug/Sublime/SublimePackage/">Sublime插件</a></li><li class="post-list-item"><a class="post-list-link" href="/2015/12/21/Demohttps://tuchong.com/1496450//">前端资源导航</a></li><li class="post-list-item"><a class="post-list-link" href="/2015/12/11/Skill/BusyFront/">Busy前端工作室</a></li></ul>
    <script src="https://7.url.cn/edu/jslib/comb/require-2.1.6,jquery-1.9.1.min.js"></script>
    <script>
        $(".post-list").addClass("toc-article");
        $(".post-list-item a").attr("target","_blank");
        $("#post-nav-button > a:nth-child(2)").click(function() {
            $(".fa-bars, .fa-times").toggle();
            $(".post-list").toggle(300);
            if ($(".toc").length > 0) {
                $("#toc, #tocButton").toggle(200, function() {
                    if ($(".switch-area").is(":visible")) {
                        $("#tocButton").attr("value", valueHide);
                        }
                    })
            }
            else {
            }
        })
    </script>



    <script>
        
    </script>
</div>
      <footer id="footer">
    <div class="outer">
        <div id="footer-info">
            <div class="footer-left">
                &copy; 2017 安与生
            </div>
            <div class="footer-right">
                <a href="http://hexo.io/" target="_blank">Hexo</a>  Theme <a href="https://github.com/Jimmey-Jiang/hexo-theme-spfk" target="_blank">spfk</a> by Jimmey-Jiang
            </div>
        </div>
        
            <div class="visit">
                
                    <span id="busuanzi_container_site_pv" style='display:none'>
                        <span id="site-visit" >海贼到访数: 
                            <span id="busuanzi_value_site_uv"></span>
                        </span>
                    </span>
                
                
                    <span>, </span>
                
                
                    <span id="busuanzi_container_page_pv" style='display:none'>
                        <span id="page-visit">本页阅读量: 
                            <span id="busuanzi_value_page_pv"></span>
                        </span>
                    </span>
                
            </div>
        
    </div>
</footer>

    </div>
    <script src="https://7.url.cn/edu/jslib/comb/require-2.1.6,jquery-1.9.1.min.js"></script>
<script src="/js/main.js"></script>

    <script>
        $(document).ready(function() {
            var backgroundnum = 24;
            var backgroundimg = "url(/background/bg-x.jpg)".replace(/x/gi, Math.ceil(Math.random() * backgroundnum));
            $("#mobile-nav").css({"background-image": backgroundimg,"background-size": "cover","background-position": "center"});
            $(".left-col").css({"background-image": backgroundimg,"background-size": "cover","background-position": "center"});
        })
    </script>




	<script>
	var _hmt = _hmt || [];
	(function() {
	  var hm = document.createElement("script");
	  hm.src = "//hm.baidu.com/hm.js?819b1c6493df653afb8c7846bc4b8db6";
	  var s = document.getElementsByTagName("script")[0]; 
	  s.parentNode.insertBefore(hm, s);
	})();
	</script>


<div class="scroll" id="scroll">
    <a href="#"><i class="fa fa-arrow-up"></i></a>
    <a href="#comments"><i class="fa fa-comments-o"></i></a>
    <a href="#footer"><i class="fa fa-arrow-down"></i></a>
</div>
<script>
    $(document).ready(function() {
        if ($("#comments").length < 1) {
            $("#scroll > a:nth-child(2)").hide();
        };
    })
</script>

<script async src="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js">
</script>

  <script language="javascript">
    $(function() {
        $("a[title]").each(function() {
            var a = $(this);
            var title = a.attr('title');
            if (title == undefined || title == "") return;
            a.data('title', title).removeAttr('title').hover(

            function() {
                var offset = a.offset();
                $("<div id=\"anchortitlecontainer\"></div>").appendTo($("body")).html(title).css({
                    top: offset.top - a.outerHeight() - 15,
                    left: offset.left + a.outerWidth()/2 + 1
                }).fadeIn(function() {
                    var pop = $(this);
                    setTimeout(function() {
                        pop.remove();
                    }, pop.text().length * 800);
                });
            }, function() {
                $("#anchortitlecontainer").remove();
            });
        });
    });
</script>


    <script type="text/javascript">
      window.onload = function(){
        document.getElementById("search").onclick = function(){
            console.log("search")
            search();
        }
      }
      function search(){
        (function(w,d,t,u,n,s,e){w['SwiftypeObject']=n;w[n]=w[n]||function(){
        (w[n].q=w[n].q||[]).push(arguments);};s=d.createElement(t);
        e=d.getElementsByTagName(t)[0];s.async=1;s.src=u;e.parentNode.insertBefore(s,e);
        })(window,document,'script','//s.swiftypecdn.com/install/v2/st.js','_st');

        _st('install','A1Pz-LKMXbrzcFg2FWi6','2.0.0');
      }
    </script>

  </div>
</body>
</html>